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

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

但是，因为这只是一个更大网站的片段，所以我犹豫是否要将这些 float 内容放入 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/