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应该在底部，如下所示。

测试
测试
试验试验试验

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

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，它仍然有效（尽管页面上的其他标记不是最好的方式要做到这一点 - 你需要像.table-cell这样的div上的类名，而是使用那个选择器。）

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>

Here is demo

或者如果你只是想在下一行看到这个：

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

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>

在底部css定位一个div

3 个答案: