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

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Člen

: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

Aaa Aaa

Člen

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č

Nahoru Odpovědět

23.2.2018 14:09

Člen

:23.2.2018 15:20

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

Nahoru Odpovědět

23.2.2018 15:20

Naučíme tě pracovat na home-office.

Zjistit více...

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.

Nejčastěji vyhledáváné

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