【发布时间】：2012-10-25 11:15:43
【问题描述】：
我正在尝试使用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 插件
EDIT 2:
我找到了一个脚本来平衡一行中所有元素的高度，但我不会使用它，因为现在我意识到没有脚本可以应用于大型表格结构。
CSS Flexible Box Layout Module 是一种解决方案，但目前主流浏览器不支持，并且渲染速度比普通表格慢得多。
【问题讨论】：
-
你为什么要重新发明轮子？
-
如果您需要一个表格，请使用表格... BW：我想说您需要为每一行添加一个额外的包装器，或者至少对每行中的第一项进行一些标识。
-
表格标记不能轻易在页面的源代码中添加内容
-
你在说什么，什么轮子？如果这个“轮子”已经被发明出来了，那就展示一下吧
-
这个轮子：
<table><tr><td>Content</td></tr></table>
标签： javascript jquery css css-float