vertical-align: unten MIT float: links

Question

wie könnte ich vertical-align:bottom für einige divs, die float:left haben?

Sie die Quelle hier sehen können: http://jsfiddle.net/Lb1su4w2/

---

das ist, was ich habe:(jede Farbe eine andere div ist)

das ist, was ich will haben:

Answer 1

Vertical align funktioniert nur mit Inline-Blockelementen, Floated-Elemente ignorieren die Eigenschaft Vertical align.

Aktualisieren Sie die Box-Klasse mit dem folgenden:

.box { 
    display: inline-block; 
    vertical-align: bottom; 
    width:80px; 
} 

Ich würde sie alle Inline-Block-Elemente machen und den Leerraum mit one of these techniques entfernen.

Aktualisiert Geige: http://jsfiddle.net/9rcnLb8n/

Alternativ Sie flexbox mit der align-self: flex-end; Eigenschaft nutzen könnten.

Answer 2

HTML:

<div id='wrapper'> 
    <div id='a' class='box'>aa</div> 
    <div id='b' class='box'>bb</div> 
    <div id='c' class='box'>cc</div> 
    <div id='d' class='box'>dd</div> 
</div> 

CSS:

.box { 
    width:80px; 
    vertical-align: bottom; 
    display: inline-block; 
} 
#a { 
    background-color:red; 
    height:200px; 
} 
#b { 
    background-color:green; 
    height:100px; 
} 
#c { 
    background-color:yellow; 
    height:150px; 
} 
#d { 
    background-color:blue; 
    height:300px; 
} 

#wrapper { 
    border: 1px solid pink; 
    display: table; 
} 

In diesem Fall verwenden Sie nicht:

float: left; 

Stattdessen verwenden:

display: inline-block; 

Schauen Sie sich meine Geige:

http://jsfiddle.net/Lb1su4w2/6/