vertical-align：bottom WITH float：left

Question

我該怎麼做vertical-align:bottom對於一些有float:left的div？

，你可以在這裏看到的來源：http://jsfiddle.net/Lb1su4w2/

---

這是我有：（每一種顏色是不同的div）

這是我想有：

Answer 1

垂直對齊僅適用於內嵌塊元素，浮動元素忽略垂直對齊屬性。

更新框類有以下：

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

我會讓他們所有的內聯塊元素，並與one of these techniques刪除空白。

更新小提琴：http://jsfiddle.net/9rcnLb8n/

另外，您可以使用flexbox與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; 
} 

在這種情況下不使用：

float: left; 

而是使用：

display: inline-block; 

看看我的小提琴：

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