html2个图片左浮动一个有浮动,HTML/CSS：制作两个高度相同的浮动div

您可以在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中测试了这一点。这看起来像是一个丑陋的技巧，但它运行良好，我在生产中经常使用它。

我希望这能帮到你。