我正在尝试使用box-sizing:border-box;float:left元素构建一个简单的表格。
警告 1. 也许我的方法不好，甚至可能不需要使用“float”和“box-sizing”属性来完成这个任务，那么在这种情况下你会怎么做？警告 2. 当然，您应该记住，您必须使用支持 CSS3 的现代浏览器才能查看此标记 :)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
div {
vertical-align:top;
margin:0px;
padding:0px;
}
div.table {
border:solid 2px green;
width:90%;
background-color:red;
}
div.table > div:not(.clear)
{
-moz-box-sizing:border-box;
box-sizing:border-box;
float:left;
max-height:8em;
overflow:auto;
border:solid thin black;
background-color:white;
}
div.table > div:nth-child(3n+1):not(.clear)
{
clear:left;
width:40%;
}
div.table > div:nth-child(3n+2):not(.clear),div.table > div:nth-child(3n+3):not(.clear) {width:30%;}
div.clear {clear:both;height:0px;border-style:none;}
</style>
</head>
<body>
<div class="table">
<div>
Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first
</div>
<div>Middle first</div>
<div>Right first</div>
<div>Left second</div>
<div>Middle second</div>
<div>Right second</div>
<div class="clear"></div>
</div>
</body>
</html>
您会看到那个红色区域，它显示“中间优先”和“右边优先”的 div 高度不会拉伸以适应行中高度最大的元素。如何强制他们自动拉伸高度？我更喜欢纯 CSS 解决方案，但如果它可以处理非常非常大的表，则接受 javascript (jquery) 解决方案......
编辑： 当然，使用浮动元素不是我的任务的方法，算了。我不喜欢这个实现，但这可能会让我更好地理解我想要什么：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
div {vertical-align:top;margin:0px;padding:0px;}
div.table {display:inline-block;border:solid 2px green;background-color:red;}
div.table > div{display:inline-block;
max-height:8em;overflow:auto;
border:solid thin black;background-color:white;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
$(document).ready(function () {
$('<br />').insertAfter($("div.table > div:nth-child(3n+3)").not(':last'));
$("div.table > div:nth-child(4n+1)").each(function () {
$(this).css('width', '15em');
if ($(this).height() < $(this).next('div').height() || $(this).height() < $(this).next('div').next('div').height()) {
$(this).height(Math.max($(this).next('div').height(), $(this).next('div').next('div').height()));
}
});
$("div.table > div:nth-child(4n+2)").each(function () {
$(this).css('width', '10em');
if ($(this).height() < $(this).prev('div').height() || $(this).height() < $(this).next('div').height()) {
$(this).height(Math.max($(this).prev('div').height(), $(this).next('div').height()));
}
});
$("div.table > div:nth-child(4n+3)").each(function () {
$(this).css('width', '10em');
if ($(this).height() < $(this).prev('div').height() || $(this).height() < $(this).prev('div').prev('div').height()) {
$(this).height(Math.max($(this).prev('div').height(), $(this).prev('div').prev('div').height()));
}
});
});
</script>
</head>
<body>
<div class="table">
<div>Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first<br />Left first</div><div>Middle first<br />Middle first<br />Middle first<br />Middle first<br />Middle first<br />Middle first<br />Middle first<br />Middle first<br />Middle first<br />longlonglonglonglonglonglonglonglonglong</div><div>Right first</div>
<div>Left second</div><div>Middle second Middle second Middle second<br />longlonglonglonglonglonglonglonglonglong</div><div>Right second</div>
</div>
</body>
</html>
缺点： 1. 需要一堆难看的JS。2. 出现滚动条或缩放页面时会出现红色区域。它们在不同的浏览器中有所不同。有谁知道他们来自哪里？？？有可能摆脱它们吗？如果不是，我将尝试使用类似 equalHeights jquery 插件
编辑 2：
我找到了一个脚本来均衡一行中所有元素的高度，但我不会使用它，因为现在我意识到没有脚本可应用于大型表状结构。CSS Flexible Box Layout Module 是一种解决方案，但目前主流浏览器不支持它，并且渲染速度比普通表格慢得多。