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;
}

我会使它们成为所有内联块元素,并使用这些技术之一删除空白.

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

或者,您可以将flexbox与align-self: flex-end;属性一起使用.