今天我又一次偶然发现了一个我一直在用css布局的问题。我想在水平行中有 5 个div。例如，假设它们的宽度应该是：
- 1 ： 60 像素，
- 2 ： 30 %，
- 3 ： 40px，
- 4 ： *
- 5 ： 100px
其中 * 代表"填满剩余空间"。在过去，这就是我们布局宽度表的方式。如今，由于可访问性的原因，html表格被禁止用于布局。这只是一个例子。我正在寻找一个通用解决方案。
有没有人知道一个生成器，一个轻量级的javascript解决方案（可以是jQuery插件），一个教程，一本书，或者一个魔术师，可以帮助我现在和永远解决这个问题？
尽管基于javascript的解决方案是可能的，但非脚本解决方案将是首选。
您可以使用display:table来创建此效果，我做了一个快速的小提琴
这使得单个div的行为就像表单元格，section是表，我使用了一个部分只是为了获得更干净的代码，div也可以。
您会注意到，如果窗口大小太小，表格单元格会小于您指定的单元格，这是因为表格的默认行为。要解决此问题，只需添加一个最小宽度（与宽度具有相同的值）
>http://jsfiddle.net/lnplnp/bFrmD/
#div1 {
width: 60px;
}
#div2 {
width: 30%;
}
#div3 {
width: 40px;
}
#div4 {
}
#div5 {
width: 100px;
}
.layout {
display:table;
}
.cell {
display: table-cell;
}
<html>
<head>
<title>DIV LIKE TABLE</title>
</head>
<body>
<div class="layout">
<div id="div1" class="cell">1</div>
<div id="div2" class="cell">2</div>
<div id="div3" class="cell">3</div>
<div id="div4" class="cell">4</div>
<div id="div5" class="cell">5</div>
</div>
</body>
</html>
交叉你的手指！有了最近的浏览器，你现在可以做到了！