vertical-align: bottom WITH float: left

Question

come potrei fare vertical-align:bottom per alcuni div che hanno float:left?

si può vedere la fonte qui: http://jsfiddle.net/Lb1su4w2/

---

questo è quello che ho:(ogni colore è un diverso div)

questo è quello che voglio avere:

Answer 1

L'allineamento verticale funziona solo con gli elementi di blocco in linea, gli elementi fluttuanti ignorano la proprietà di allineamento verticale.

aggiornare la classe dialogo con il seguente:

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

vorrei fare loro tutti gli elementi di blocco in linea e rimuovere gli spazi con one of these techniques.

violino Aggiornato: http://jsfiddle.net/9rcnLb8n/

In alternativa è possibile utilizzare flexbox con la proprietà align-self: flex-end;.

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 questo caso non utilizzare:

float: left; 

invece utilizzare:

display: inline-block; 

Guarda il mio violino:

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