您可以在CSS中获得等高的列,方法是应用大量的底部填充,相同数量的底部负边距,并在列周围加上具有溢出隐藏的div。垂直对中的文本是有点棘手,但这应该有助于您的路上。#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;}html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Test content
longer
Test content
你不需要额外的元素clear为了清理容器的内部浮子。如果您使用溢出隐藏,这将清除所有非IE浏览器中的浮点数,然后只需添加一些给予hasLayout的内容,例如宽度或缩放:1将导致IE清除其内部浮点数。
我已经在所有的现代浏览器FF3+Opera 9+ChromeSafari 3+和IE6/7/8中测试了这一点。这看起来像是一个丑陋的技巧,但它运行良好,我在生产中经常使用它。
我希望这能帮到你。