Question

我有一个3柱状的页脚，我需要内部的所有元素垂直对齐底部。目前，div已经与顶部对齐：http://jsfiddle.net/tmyie/SMtW6/1/

.col33 {
    width: 33%;
    float: left;
    background-color: red;
    font-size: 90%;
}

.col33 > ul, .col33 > p {
    margin-bottom: 0;
    padding-bottom: 0;
}

但是，因为这只是一个更大的网站的片段，我对于将这些花车变成inline-blocks时犹豫不决。我可以添加任何标记或CSS，以使.col33的子项垂直对齐到底部吗？

Answer 1

将col33的CSS更新为

.col33 {
  width: 33%;
  background-color: red;
  font-size: 90%;
  height: 100px;
  display: table-cell;
  vertical-align: bottom;
}

以下是工作示例http://jsfiddle.net/SMtW6/3/

Answer 2

更新.col33，如下所述：

删除 float：left

添加 display：table-cell

添加 vertical-align：middle

检查以下css是否相同：

.col33 {
    width: 33%;
    background-color: red;
    font-size: 90%;;
    vertical-align:middle;
    display:table-cell;
}

<强> Fiddle

将元素垂直对齐到父元素的底部？

2 个答案: