位置底部CSS一个div

这里是我的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而不是table来实现这一点。任何帮助，将不胜感激。谢谢。

来源

2014-02-08 marsweb

你是什么意思，当你说底部。你的意思是低于屏幕/页面的第一个div或底部？ –

如果在页面底部 - 谷歌“粘脚” – LorDex

请看我编辑的问题 – marsweb

您不需要使用表格来充分利用表格布局：

您可能需要将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/

更新

Acutally，你根本不需要.table-row包装器。

你可以在上面的代码中删除它，并将选择器从.table-row > div更改为jsust div，它仍然可以工作（尽管页面上的其他标记不会是最好的方法 - d想在类似.table-cell的div上输入一个类名，并使用该选择器代替。）

来源

2014-02-08 11:56:06 Faust

您的解决方案工作。谢谢。 – marsweb

请记住，IE7及以下版本不支持'display：table-cell'，但现在这只是浏览器市场的一小部分。 – Faust

尝试设置底部：0到两格：

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

来源

2014-02-08 11:50:20

试过。但不工作。 – marsweb

@marsweb请参阅http://jsfiddle.net/LQsUq/ –

你想在页面底部2和3个div。 – Vegeta

工作实例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>

来源

2014-02-08 11:55:50 CRABOLO

您的解决方案也有效。谢谢你的努力。 – marsweb

位置底部CSS一个div

回答

相关问题