html表格不置顶,你可以在不使用表格的情况下进行HTML布局吗？

好的，一周或两周前我遇到了一个简单的布局问题。即页面的部分需要标题：

+---------------------------------------------------------+

| Title Button |

+---------------------------------------------------------+

因此，这不是关于CSS与布局表格的一般性讨论。这只是一个问题的解决方案。我使用CSS尝试了以上各种解决方案，包括：

向右浮动按钮或包含按钮的div;

按钮的相对位置;和

位置相对+绝对。

由于各种原因，这些解决方案都不令人满意。例如，相对定位导致z-index问题，我的下拉菜单出现在内容下。

所以我最终回到了：

.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; }

Title

它完美无缺。它很简单，因为它具有向后兼容性(即使在IE5上也可以工作)并且它只是起作用。没有搞定位或漂浮物。

所有人都可以在没有桌子的情况下做相同的事情吗？

要求是：

向后兼容：到FF2和IE6;

在不同浏览器中合理一致;

垂直居中：按钮和标题的高度不同;和

灵活：允许合理精确控制定位(填充和/或边距)和样式。

另一方面，我今天看到了几篇有趣的文章：

编辑：让我详细说明浮动问题。这种作品：

Layout

.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; }

This is my title

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.

So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?

On a side note, I came across a couple of interesting articles today:

感谢overflow: hidden部分的Ant P(但仍然不明白为什么)。这就是问题所在。说我希望标题和按钮垂直居中。这是有问题的，因为元素具有不同的高度。将其与：进行比较

Layout

.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; }

This is my title

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.

So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?

On a side note, I came across a couple of interesting articles today:

完美无缺。