vertical-align：bottom WITH float：left

Question

对于有vertical-align:bottom的某些div，我怎么能float:left？

您可以在此处查看来源：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/