好的，一两周前我遇到了一个简单的布局问题。即页面的各个部分需要标题:
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+
很简单的东西。事情是餐 table 仇恨似乎已经接管了网络世界，当我问 Why use definition lists (DL,DD,DT) tags for HTML forms instead of tables? 时，我想起了这一点。现在之前已经讨论过表格与 div/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 上也能工作)，而且它只是工作。不要乱搞定位或 float 。
那么没有表格，任何人都可以做同样的事情吗？
要求是:
- 向后兼容:到 FF2 和 IE6；
- 合理一致:跨不同的浏览器；
- 垂直居中:按钮和标题的高度不同；和
- 灵活:允许对定位(填充和/或边距)和样式进行相当精确的控制。
顺便说一句，我今天看到了几篇有趣的文章:
编辑:让我详细说明 float 问题。这类作品:
<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>
完美运行。
最佳答案
使用可用的工具快速正确地完成工作没有错。
在这种情况下，表格工作得很好。
我个人会为此使用表格。
我认为应该避免嵌套表格，事情会变得困惑。
关于html - 你能在不使用表格的情况下完成这个 HTML 布局吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/522928/