html - 在底部 css 放置一个 div

Question

我正在使用 HTML 5 和 CSS 3。

这是我的 html 代码:

<div style="float:left; width:100px; height:150px;">Column 1</div>
<div style="float:left; width:100px;">Column 2</div>
<div style="float:left; width:100px;">Column 3</div>

我试图将第二个和第三个 div 放在底部，而不考虑第一个 div 的高度。无论第一个 div 的高度是多少，但第二个和第三个 div 应该在底部，如下所示。

测试
测试
测试 测试 测试

我试过 position absolute inside div 但没有用。我需要使用 div 而不是 table 来实现这一点。任何帮助，将不胜感激。谢谢。

Answer 1

您不需要使用表格来利用表格布局:

您可能需要将 div 包裹在另一个 div 中以充当表格行。这些柱子会变长，所以它们都和最高的一样高:

html

<div class='table-row'>
    <div>Column 1<br>with<br>more<br>text</div>
    <div>Column 2</div>
    <div>Column 3</div>
</div>

CSS

.table-row{
    display:table-row;
}
.table-row > div{
    display:table-cell
    ;width:100px;
    vertical-align:bottom;
}

此处演示:http://jsfiddle.net/mhfaust/CV33q/

更新

实际上，您根本不需要 .table-row 包装器。

您可以在上面的代码中删除它，并将选择器从 .table-row > div 更改为 jsust div 它仍然有效(尽管使用其他标记在页面上，这不是最好的方法——你希望 div 上有一个类名，如 .table-cell 并改用该选择器。)