【发布时间】：2010-10-06 02:15:41
【问题描述】：
好的，一两周前我遇到了一个简单的布局问题。即页面的各个部分需要一个标题：
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+
很简单的东西。事情是表格仇恨似乎已经在网络世界中占据了主导地位，当我问Why use definition lists (DL,DD,DT) tags for HTML forms instead of tables? 时，我被提醒了现在表格与 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>
效果很好。
【问题讨论】：
-
好吧，这是有道理的“我应该为 vim 使用什么颜色？”被赞成，我的特定 CSS 布局问题被反对。
-
在任何情况下，您都可以在没有桌子的情况下为所欲为。还有，到底为什么@SamB 碰到了这个 2 岁的问题？卫生部+
-
@yes123：嗯，语法高亮是错误的……