Question

我写了以下HTML：

<div id='wrapper'>
    <div style='background-color:Red; float:left; width:50%'></div>
    <div style='background-color:Green; width:50%'></div>                  
</div>

这给了我一个红色的列和一个绿色的列。当我添加文本时，这两列将向下延伸到页面。但是，我真正希望两列的高度完全相同，无论每列中的文本数量多少或多少。

我该怎么做？

Answer 1

有一个可靠的选项详细here。

Answer 2

您最好的选择是使用CSS3列，但显然这会限制您的浏览器支持范围。 http://www.quirksmode.org/css/multicolumn.html

过去你有几个选择，首先你可以通过javascript（痛苦和烦人）使它们匹配。或者有一些CSS黑客使用负底部边缘可以使它工作，但有点不稳定，iirc。

有关一些负边际选项的参考：

Answer 3

这是一个黑客，因为它使用一个空div来清除浮动，但这应该具有你在所有浏览器中寻找的效果，而不使用任何JavaScript。

使用以下CSS：

div.column {
   float:left;
   width:50%;
   height:500px;
   overflow:hidden;
}

div.column.first {
    background-color:red;
}

div.column.second {
    background-color:green;
}

div.clear {
    clear:both;
    height:0%;
    width:0%;
    line-height:0%;
}

以下HTML：

<div id="wrapper">
    <div class="column first"></div>
    <div class="column second"></div>
    <div class="clear"></div>
</div>

如何在HTML中有两个相同高度的列？

3 个答案: