在CSS中将一个div定位到底部

Question

我正在使用HTML5和CSS3。

这是我的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都应该像下面这样处于底部。

测试 测试 测试        测试        测试

我尝试在div内使用绝对定位，但不起作用。我需要使用div而不是表格来实现这一点。任何帮助将不胜感激。谢谢。

- marsweb

---

当你说“at bottom”时，你的意思是指第一个div下面还是屏幕/页面底部？ - Dominic Green

如果在页面底部，请搜索“粘性页脚” - LorDex

请查看我编辑过的问题。 - marsweb

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 更改为 jsut div，它仍然可以工作（尽管在页面上使用其他标记时，这不是最好的方法 - 您会希望在 div 上使用类名如 .table-cell 并使用该选择器。）

- Faust

---

请注意，IE7及以下版本不支持display:table-cell，但这已经是浏览器市场的一小部分了。 - Faust

Answer 2

尝试将bottom:0设置为两个div：

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

这里是演示

或者如果你想要在下一行看到，试试这个：

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

- Zaheer Ahmed

---

你想在页面底部放置2个或3个div吗？ - Vegeta

Answer 3

工作示例 http://jsfiddle.net/cYbW7/

<div style="background: yellow; float: left; display: block; position: relative;">

    <div style="width:100px;display: inline-block; height:150px; background: red;">Column 1</div>
<div style="width:100px;display: inline-block; vertical-align: bottom;background: blue;">Column 2</div>
<div style="width:100px;display: inline-block; vertical-align: bottom; background: green;">Column 3</div>

</div>

- CRABOLO