好的，我在一两个星期前遇到了一个简单的布局问题。即页面的各个部分需要一个标题：
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+很简单的东西。在网络世界中，表仇恨似乎已经接管了一切，当我问为什么对HTML表单而不是表使用定义列表（DL，DD，DT）标签时，让我想起了这一点。 现在，前面已经讨论了表vs divs / CSS的一般主题，例如：
因此，这并不是要对CSS与布局表进行一般性讨论。这只是解决一个问题的方法。我使用CSS尝试了上述各种解决方案，包括：
- 向右浮动按钮或包含按钮的div；
- 按钮的相对位置；和
- 相对位置+绝对位置。
这些解决方案均因不同原因而不能令人满意。例如，相对位置导致z-index问题，其中我的下拉菜单出现在内容下方。
所以我最后回到了：
<style type="text/css">
.group-header { background-color: yellow; width: 100%; }
.group-header td { padding: 8px; }
.group-title { text-align: left; font-weight: bold; }
.group-buttons { text-align: right; }
</style>
<table class="group-header">
<tr>
<td class="group-title">Title</td>
<td class="group-buttons"><input type="button" name="Button"></td>
</tr>
</table>而且效果很好。这很简单，因为它具有向后兼容性（即使在IE5上也可以使用），并且可以正常工作。不要乱搞定位或浮动。
那么，没有表的人可以做到这一点吗？
要求是：
- 向后兼容：到FF2和IE6；
- 合理一致：跨不同的浏览器；
- 垂直居中：按钮和标题的高度不同；和
- 灵活：可以对定位（填充和/或边距）和样式进行合理精确的控制。
附带说明一下，今天我碰到了几篇有趣的文章：
编辑：让我详细说明浮动问题。这类作品：
<html>
<head>
<title>Layout</title>
<style type="text/css">
.group-header, .group-content { width: 500px; margin: 0 auto; }
.group-header { border: 1px solid red; background: yellow; overflow: hidden; }
.group-content { border: 1px solid black; background: #DDD; }
.group-title { float: left; padding: 8px; }
.group-buttons { float: right; padding: 8px; }
</style>
</head>
<body>
<div class="group-header">
<div class="group-title">This is my title</div>
<div class="group-buttons"><input type="button" value="Collapse"></div>
</div>
<div class="group-content">
<p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
<p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
<p>On a side note, I came across a couple of interesting articles today:</p>
</div>
</body>
</html>多亏了Ant P的帮助overflow: hidden（尽管还是不明白为什么）。这就是问题所在。例如，我希望标题和按钮垂直居中。这是有问题的，因为元件具有不同的高度。比较一下：
<html>
<head>
<title>Layout</title>
<style type="text/css">
.group-header, .group-content { width: 500px; margin: 0 auto; }
.group-header { border: 1px solid red; background: yellow; overflow: hidden; }
.group-content { border: 1px solid black; background: #DDD; }
.group-header td { vertical-align: middle; }
.group-title { padding: 8px; }
.group-buttons { text-align: right; }
</style>
</head>
<body>
<table class="group-header">
<tr>
<td class="group-title">This is my title</td>
<td class="group-buttons"><input type="button" value="Collapse"></td>
</tr>
</table>
<div class="group-content">
<p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
<p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
<p>On a side note, I came across a couple of interesting articles today:</p>
</div>
</body>
</html>完美地运作。
11
好的，“我应该为Vim使用哪种颜色？” 被投票，我特定的CSS布局问题被投票。
—
cletus
在任何情况下，您都可以在没有表格的情况下做任何您想做的事情。同样为什么在地狱中@SamB碰到了这个2岁的问题呢？DOH +
—
动态的
@ yes123：好吧，语法高亮显示是错误的……
—
SamB 2011年