Autor Zpráva
ata
Profil *
Ahoj, potřeboval bych poradit s vertikalní zarovnáním divů. Mám za sebou na řádku různě vysoké div a potřeboval bych je vertikálně zarovnat dolů. Jejich výška není předem známá.

Mám http://jsfiddle.net/2Y3Rg/1/ ale potřeboval bych to takhle http://i40.tinypic.com/spi4o2.gif Nějak tip jak toho docílit? Nebo mám raději použít tabulku?
panther
Profil
ata:
tohle skoro zavání tabulkovými daty? Nejsou tam? Pak by totiž byla správně tabulka.

Pokud trváš na divech, něčím je obal a umísti absolutně na spodek obalového prvku. Tedy pokud znáš aspoň jejich šířku. To bude asi nejjednodušší.
ata
Profil *
Tabulková data to nejsou, v divu budou různě vysoký obrázky. Přijde mě, že se na to tabulka nehodí.

A pomocí absolutního pozicovaní nevím jak to napsat, sesype se mi to všechno na jednu hromadu. Mohl bych poprosit o ukázku?
Gappa
Profil
ata:
na tohle se jako vyšitý hodí inline-block a nastavit mu vertical-align: bottom
ata
Profil *
Děkuji, tohle přesně řeší můj problém.
Plaváček
Profil
ata:

Podpora inline-block ale není napříč prohlížeči kdovijaká. Pokud tam budou jenom obrázky, není důvod nepoužít tabulku.
Gappa
Profil
Plaváček:
Podpora inline-block ale není napříč prohlížeči kdovijaká.

Největší problém je s FF 2.x, tam se musí použít obezlička -moz-inline-stack nebo -moz-inline-box, ale obojí funguje podobně špatně se svými specifickými problémy. FF 2.x ale už je pomalu "vymřelý" (momentálně 0,71 % dle rankings.cz), takže to není důvod nepoužívat, přinejhorším se to takovému návštěvníkovi zobrazí klasicky pod sebou.

IE6/IE7 se dá ke správnému chování přemluvit celkem snadno, když člověk ví jak.

Pokud tam budou jenom obrázky, není důvod nepoužít tabulku.
Přesně tak, ale problém nastává, pokud stránka nemá fixní šířku a počet takto umístěných prvků na řádku může být jiný :)
Speedl.cz
Profil *
Gappa:
IE6/IE7 se dá ke správnému chování přemluvit celkem snadno, když člověk ví jak.
Když víš jak, tak to prozraď i ostatním - třeba těm, co na to ještě nekápli - viz já. Dík předem.
Gappa
Profil
Speedl.cz:
Když víš jak, tak to prozraď i ostatním - třeba těm, co na to ještě nekápli - viz já. Dík předem.

Promiň, jasně:

Pokud je element defaultně inline, pak není třeba dělat nic extra, jen mu nastavit inline-block;
Pokud je element defaultně blokový/list-item atp., tak je potřeba něco takového:
display: inline-block;
display: inline;
zoom: 1; /* a znovu zapnout hasLayout */


Vypadá to divně, to ano, ale dělá to přesně to, co je potřeba.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: