您可以在不使用表格的情况下进行此HTML布局吗？
好吧，一两周前我遇到了一个简单的布局问题。也就是说，页面的各个部分需要一个标题：
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+非常简单的东西。表的仇恨似乎已经在网络世界占据了上风，当我问Why use definition lists (DL,DD,DT) tags for HTML forms instead of tables?时，我想起了以前讨论过的表与div/CSS的一般主题，例如：
因此，这并不是关于CSS与表格布局的一般性讨论。这只是一个问题的解决方案。我使用CSS尝试了上述各种解决方案，包括：
对于按钮或包含按钮的相对button;
- Position的div，使用
- Float right；使用
- Position div
由于不同的原因，这些解决方案都不能令人满意。例如，相对定位导致z索引问题，我的下拉菜单出现在内容下面。
所以我最终又回到了：
<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上也可以工作)，而且它就是工作。不要摆弄定位或浮点。
那么，任何人都可以在没有表的情况下做同样的事情吗？
要求是：
- Backwards兼容:与IE6;
- Reasonably和FF2保持一致:跨不同的居中：按钮和标题具有不同的高度；允许合理精确地控制位置(填充和/或页边距)和样式。
顺便说一句，我今天看到了几篇有趣的文章：
编辑：让我详细说明浮动问题。这种方式是有效的：
<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>它工作得很完美。
回答 10
Stack Overflow用户
发布于 2009-02-07 02:11:12
使用您可以使用的工具来快速、正确地完成工作并没有错。
在这种情况下，一张表可以完美地工作。
我个人会用一张桌子来做这个。
我认为应该避免嵌套表，因为事情可能会变得混乱。
Stack Overflow用户
发布于 2009-02-07 01:50:05
只需向左和向右浮动，并设置为清除两者，您就完成了。不需要表格。
编辑：我知道我在这方面得到了很多好评，我相信我是对的。但在某些情况下，您只需要拥有表。你可以尝试用CSS做任何事情，它将在现代浏览器中工作，但如果你希望支持旧的浏览器...我不重复了，这里是related stack overflow thread和rant on my blog。
Edit2:因为老的浏览器不再那么有趣了，所以我在新项目中使用Twitter bootstrap。它对于大多数布局需求和使用CSS都是很好的。
Stack Overflow用户
发布于 2009-02-07 01:50:54
向左浮动标题，向右浮动按钮，以及(这是我直到最近才知道的部分)-让它们的容器都成为{overflow:hidden}。
无论如何，这应该可以避免z-index问题。如果它不工作，并且您确实需要IE5支持，请继续使用该表。
https://stackoverflow.com/questions/522928
复制相似问题