我目前使用来解决一个特殊的问题table，请参阅下文。基本上，我希望两个div占用可用宽度的100％，但只占用所需的垂直空间（从图片上看并不是很明显）。如图所示，两者始终应具有完全相同的高度，并且两者之间应有一点线。
（来源：pici.se）
table我目前正在使用，这一切都很容易做到。但是，我不太热衷于解决方案，因为从语义上讲这实际上不是表。
Answers:
通过应用大量的底部填充，等量的底部负边距并用隐藏了溢出的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;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head></head>
<body>
<div id="container">
<div id="left-col">
<p>Test content</p>
<p>longer</p>
</div>
<div id="right-col">
<p>Test content</p>
</div>
</div>
</body>我认为值得一提的是 streetpc先前的答案包含无效的html，文档类型为XHTML，并且属性周围有单引号。另外值得注意的是您不需要带有clearon 的额外元素即可清除容器的内部浮点数。如果您使用隐藏的溢出，这将清除所有非IE浏览器中的浮点数，然后仅添加一些东西给hasLayout，例如width或zoom：1，将导致IE清除其内部浮点数。
我已经在所有现代浏览器FF3 + Opera9 + Chrome Safari 3+和IE6 / 7/8中对此进行了测试。这看似很难看，但是效果很好，我在生产中经常使用它。
我希望这有帮助。
现在是2012年+ n年，因此，如果您不再关心IE6 / 7 display:table、，display:table-row并且display:table-cell可以在所有现代浏览器中使用：
http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/
2016-06-17更新：如果您认为需要时间display:flex，请查看Flexbox Froggy。
display: flex？
您应该使用flexbox实现这一点。IE8和IE9不支持此功能，IE10不支持-ms前缀，但所有其他浏览器均支持。对于供应商前缀，还应该使用autoprefixer。
.parent {
display: flex;
flex-wrap: wrap; // allow wrapping items
}
.child {
flex-grow: 1;
flex-basis: 50%; // 50% for two in a row, 33% three in a row etc.
}您可以使用js进行此操作：
<script>
$(document).ready(function() {
var height = Math.max($("#left").height(), $("#right").height());
$("#left").height(height);
$("#right").height(height);
});
</script>这是CSS中的经典问题。确实没有解决方案。
A List Apart的这篇文章很好地解决了这个问题。它使用一种称为“仿列”的技术，其基础是在包含这些列的元素上放置一个垂直平铺的背景图像，从而产生等长列的错觉。由于它位于浮动元素的包装上，因此它与最长的元素一样长。
A List Apart编辑器在文章上有此注释：
编者注：尽管这篇文章非常出色，但可能无法反映现代最佳实践。
该技术需要完全静态的宽度设计，该设计与当前在跨设备站点中流行的液体布局和自适应设计技术不能很好地配合使用。但是，对于静态宽度站点，这是一个可靠的选择。
这适用于IE 7，FF 3.5，Chrome 3b，Safari 4（Windows）。
如果取消注释底部的更清晰的div，则在IE 6中也可以使用。
编辑：作为娜塔莉道恩说，你可以简单地添加width: 100%;到#container代替。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
#container {
overflow: hidden;
border: 1px solid black;
background-color: red;
}
#left-col {
float: left;
width: 50%;
background-color: white;
}
#right-col {
float: left;
width: 50%;
margin-right: -1px; /* Thank you IE */
}
</style>
</head>
<body>
<div id='container'>
<div id='left-col'>
Test content<br />
longer
</div>
<div id='right-col'>
Test content
</div>
<!--div style='clear: both;'></div-->
</div>
</body>
</html>如果div的高度不固定，我不知道CSS在垂直方向上将文本垂直居中的方式。如果是，则可以将line-heightdiv的值设置为与div高度相同的值，然后使用放一个包含文本的内部div display: inline; line-height: 110%。
使用Javascript，可以使两个div标签具有相同的高度。较小的div将使用以下代码调整为与最高div标签相同的高度：
var rightHeight = document.getElementById('right').clientHeight;
var leftHeight = document.getElementById('left').clientHeight;
if (leftHeight > rightHeight) {
document.getElementById('right').style.height=leftHeight+'px';
} else {
document.getElementById('left').style.height=rightHeight+'px';
}其中“ left”和“ right”是div标签的ID。
通过使用CSS属性-> display：table-cell
div {
border: 1px solid #000;
margin: 5px;
padding: 4px;
display:table-cell;
width:25% ;position:relative;
}
body{display:table;
border-collapse:separate;
border-spacing:5px 5px}<div>
This is my div one This is my div one This is my div one
</div>
<div>
This is my div two This is my div two This is my div two This is my div two This is my div two This is my div two
</div>
<div>
This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3 This is my div 3
</div>使用JS，data-same-height="group_name"在要具有相同height的所有元素中使用。
示例：https： //jsfiddle.net/eoom2b82/
代码：
$(document).ready(function() {
var equalize = function () {
var disableOnMaxWidth = 0; // 767 for bootstrap
var grouped = {};
var elements = $('*[data-same-height]');
elements.each(function () {
var el = $(this);
var id = el.attr('data-same-height');
if (!grouped[id]) {
grouped[id] = [];
}
grouped[id].push(el);
});
$.each(grouped, function (key) {
var elements = $('*[data-same-height="' + key + '"]');
elements.css('height', '');
var winWidth = $(window).width();
if (winWidth <= disableOnMaxWidth) {
return;
}
var maxHeight = 0;
elements.each(function () {
var eleq = $(this);
maxHeight = Math.max(eleq.height(), maxHeight);
});
elements.css('height', maxHeight + "px");
});
};
var timeout = null;
$(window).resize(function () {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
timeout = setTimeout(equalize, 250);
});
equalize();
});几年前，该float属性table使用display: table;和display: table-row;和方法来解决该问题display: table-cell;。
但现在与Flex属性，你可以用3行代码解决这个问题：display: flex;和flex-wrap: wrap;和flex: 1 0 50%;
.parent {
display: flex;
flex-wrap: wrap;
}
.child {
// flex: flex-grow flex-shrink flex-basis;
flex: 1 0 50%;
}1 0 50%是flex我们送给值：flex-grow flex-shrink flex-basis分别。在flexbox中，这是一个相对较新的快捷方式，可以避免单独键入它们。我希望这可以帮助某人