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/