Vertikalna poravnava v <li>

5 naročnikov

Živjo

mam en majhen problemček

štiri okvirčke imam na strani, določene z <li style="height:210px;"> pa floatane v levo.

Tudi višina je kot vidite določena, zdaj pa bi vso vsebino rad poravnal na dno.

Kako bi blo to najlažje nardit? Not mam v vsakem eno slikico pa malo teksta (eno pod drugim).

hvala vsem za pomoč že vnaprej

probaj s vertical-align

ne gre, sem poizkusil :( ta vertical-align je če se ne motim samo za posamezne elemente (npr. slike), da pa bi vso vsebino premaknil pa ni šlo :(

Če bi rad li-je poravnav vse v eno vrsto rabiš tole narest
li {
display:inline;
}

saj jih imam v eni vrsti... samo poravnal bi rad vsebino na dno <li>-ja

css
img.bottom {vertical-align:text-bottom}

html
<ul>
<li>
Tukaj je
<img class="bottom" src="slike.gif" />
besedilo-
</li>
</ul>

nisem zgleda vredu razložil

jaz mam <li> z nastavljeno višino 210px. Zadeva deluje praktično kot <td>, in tako kot v tabelah, je vsa vsebina pomaknjena na vrh okvirčka (<li>-ja). V tabeli bi zadevo rešil valign="bottom", kako pa bi tukaj vse skupaj premaknil na dno okvirčka?

Z čudežom?

Prpopaj kodo, da pogledamo mal bolj od bliz.

#vsebina{float:left;width:100%;list-style:none;}
#vsebina li{clear:both;float:left;width:96%;padding:5px 2% 10px;}
* html #vsebina li{width:100%;}

#vsebina.vvrsto {clear:both;}
#vsebina.vvrsto li{clear:none;width:25%;padding:0 0 15px;}
#vsebina.vvrsto li.i1{clear:both;float:left;}
#vsebina.vvrsto h3{padding-left:0;font-weight:bold;font-size:1.083em;}

Pol pa v <ul id="vsebina" class="vvrsto"><li style="height:210px;" class="l1">

In iz tega dobim štiri <li>-je v vrsto...

A morda kdo zdaj ve kako naj vse skupaj poravnam na dno lija?

jaz to ponavadi rešim tako, da dam li-ju padding-top

Lahko pa daš li-ju: position:relative;
in v li-ju narediš div z: position:absolute; bottom:0;

<ul id="vsebina" class="vvrsto">
<li style="height:210px; position:relative;" class="l1">
<div style="position:absolute;bottom:0;">blaaa bluuu</div>
</li>
...

Nastaviš višino in overflowaš line-height, tako kot lahko delaš sredinsko poravnano, da nastaviš enako višino elementa, kot je line-height, v temu primeru pač pretiravaš. Ne vem kako to odobravata opera in chrome, ampak IE in FF delujeta pravilno. Primer: http://tinyurl.com/dm2jry.