html两个div在相同高度,HTML/CSS：使两个浮动div的高度相同

您可以通过应用大量的底部填充，相同数量的底部负边距和围绕具有溢出隐藏的div的列来获得CSS中的相等高度列。垂直居中的文本有点棘手，但这应该帮助你的路上。

#container {

overflow: hidden;

width: 100%;

}

#left-col {

float: left;

width: 50%;

background-color: orange;

padding-bottom: 500em;

margin-bottom: -500em;

}

#right-col {

float: left;

width: 50%;

margin-right: -1px; /* Thank you IE */

border-left: 1px solid black;

background-color: red;

padding-bottom: 500em;

margin-bottom: -500em;

}

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Test content

longer

Test content

我认为值得一提的是，streetpc的上一个回答有无效的html，doctype是XHTML，并且在属性周围有单引号。还值得注意的是，你不需要一个额外的元素清除为了清除容器的内部浮动。如果你使用overflow隐藏，这会清除所有非IE浏览器中的浮动，然后只是添加一些东西给hasLayout，如宽度或缩放：1将导致IE清除其内部浮动。

我已经测试了这一切在所有现代浏览器FF3 Opera9 Chrome Safari 3和IE6 / 7/8。它可能看起来像一个丑陋的伎俩，但它工作得很好，我在生产中使用它很多。

我希望这有帮助。