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

我有一个三列的页脚，我需要内部的所有元素垂直于底部对齐。目前，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的子项垂直对齐到底部吗？

最佳答案

将col33的CSS更新为

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

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