Autor Zpráva
quatzael
Profil
Mám vedle sebe několik divů, s třídou inline. Když jsou prázdné, tak jsou umístěny normálně v linii. Když do nich vložím text, tak se celý div posune dolů až po text, který je na úrovni spodní části vedlejších divů.
Pozn. Tuhle skupinu divů mám v jiném obalovém divu, který je taky inline, ale to myslím nemá vliv..

Ilustrační obrázek:


.inline
{
height: 48px;
width: 140px;
background-image: url('/png/pic.png');
background-repeat: no-repeat;
display: inline-block;
*zoom: 1;
*display: inline;
}
juriad
Profil
Chová se to stejně ve všech prohlížečích? (Vidím tam snahu o hacky pro starší IE.)
Dodej živou ukázku.
Nerozumím jak může mít prázdný div.inline nějakou šířku. -> Vsadím se, že před chvílí tam ještě ta šírka nebyla. :-)
quatzael
Profil
juriad:
Chová se to stejně ve všech prohlížečích?
Ve všech.

nerozumím jak může mít prázdný div.inline nějakou šířku.
Je tam přece nastaveno width: 140px; takže může..


juriad:
Dodej živou ukázku
http://kod.djpw.cz/ycfb
Trejpa
Profil
quatzael:
Je to vertikálním zarovnáním inline-block prvků. Neuskočí ten s textem dolů, ale naopak ty bez textu nahoru. Výchozí hodnota je totiž nutí srovnat spodní okraj elementu s linkou pro písmo. Jediné písmo na daném řádku je v dalším inlene-block elementu, ale to je u jeho vrcholu. Proto jsou právě na tom místě. Kdyby měly všechny textový obsah, tak tuhle zvláštnost nepozoruješ.

Přidej si do stylu vertical-align: middle;

ukázka
quatzael
Profil
Trejpa:
Jojo, to funguje. Díky!
Taky mě to napadlo s tím vertical-align, ale myslel jsem, že to funguje jenom na table-cells.


juriad:
-> Vsadím se, že před chvílí tam ještě ta šírka nebyla. :-)
Možná jsem to tady pak ještě dopsal, ale u mě byla už od začátku:o)
juriad
Profil
quatzael:
Nebo přidej text dovnitř těch prázdných divů (například:  )
Bubák
Profil
juriad:
Babicovat HTML?

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: