Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Position: Absolute - Dva inline elementy sa nevojdu vedľa seba, i keď šírka a výška rodiča je neobmedzená

Aktivity
Avatar

Člen
Avatar
:23.2.2018 12:27

Zdravím, dneska som si hral s position absolute a našiel som čudné správanie. Mám element main centrovaný na stred(za pomoci position: absolute), ktorý nemá určenú výšku a šírku. V ňom su dva div-y: jeden obdĺžnik a jeden štvorec. Obidva tieto elementy majú nastavenú fixnú šírku, výšku a display inline-block. No keď zmenšujem viewport tak sa ten posledný div hodí na nový riadok - prečo? Tu je ukážka: https://codepen.io/anon/pen/MQBvRa.

Keby bol niekto lenivý kliknúť na link, tak tu je zdrojový kód:

HTML:

<main>
  <div></div>
  <div></div>
</main>

CSS:

*, *:before, *:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}
*{
  margin: 0;
}
html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
main{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px red solid;
  padding: 10px;
}
div{
  display: inline-block;
  width: 40px;
  height: 40px;
  background: lawngreen;
  vertical-align: middle;
  border: 2px blue dotted;
}
div:first-child{
  width: 400px;
  background: aqua;
}

Ďakujem, prajem pekný deň.

Editováno 23.2.2018 12:27
 
Odpovědět
23.2.2018 12:27
Avatar
Aaa Aaa
Člen
Avatar
Odpovídá na
Aaa Aaa:23.2.2018 14:09

Je to kvůli tomu transform: translate(-50%, -50%); Protože předtím, než se provede to přesunutí, tak se ty dva divy vedle sebe nevejdou a přesunou se až ve chvíli, kdy jsou pod sebou. (Viz. obrázky, na jednom vidíš, že se to před přesunutím vešlo vedle sebe, na druhém ne a proto to je pod sebou)

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
23.2.2018 14:09
Avatar

Člen
Avatar
Odpovídá na Aaa Aaa
:23.2.2018 15:20

Super, díky ti moc. Tá vizualizácia pomohla.

 
Nahoru Odpovědět
23.2.2018 15:20
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.