你能不使用表格就完成这个HTML布局吗？

好的，一两周前我遇到了一个简单的布局问题。也就是说，页面的各个部分需要一个标题：

+---------------------------------------------------------+
|标题按钮|
+---------------------------------------------------------+

非常简单的东西。问题是，表格仇恨似乎已经在网络世界中占据了主导地位，当我现在问表格与divs/CSS的一般主题时，我想起了这一点，例如：

• )；及

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

• 向右浮动按钮或包含按钮的div
• 按钮的相对位置；及
• 位置相对+绝对

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

于是我又回到了：

.组标题{背景颜色：黄色；宽度：100%；}
.group头td{padding:8px；}
.group title{文本对齐：左；字体大小：粗体；}
.group按钮{文本对齐：右；}
标题

而且它工作得很好。它很简单，尽可能向后兼容（这可能在IE5上也能工作），而且它很有效。不要乱动定位或浮动

那么，没有桌子的人能做同样的事情吗

这些要求是：

• 向后兼容：到FF2和IE6
• 合理一致：跨不同浏览器
• 垂直居中：按钮和标题的高度不同；及
• 灵活：允许对定位（填充和/或边距）和样式进行合理精确的控制

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

• )；及

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

布局
.group头，.group内容{宽度：500px；边距：0自动；}
.group头{边框：1px纯红色；背景：黄色；溢出：隐藏；}
.group内容{边框：1px纯黑色；背景：#DDD；}
.group title{float:left；padding:8px；}
.group按钮{浮点：右；填充：8px；}
这是我的头衔
而且它工作得很好。它很简单，尽可能向后兼容（这可能在IE5上也能工作），而且它很有效。不要乱动定位或浮动

因此，如果没有向后兼容至少FF2和IE6的表，任何人都可以做同样的事情吗

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

感谢您的

溢出：隐藏部分（仍然不了解原因）。这就是问题所在。假设我希望标题和按钮垂直居中。这是有问题的，因为元素的高度不同。将此与：


布局
.group头，.group内容{宽度：500px；边距：0自动；}
.group头{边框：1px纯红色；背景：黄色；溢出：隐藏；}
.group内容{边框：1px纯黑色；背景：#DDD；}
.group头td{垂直对齐：中间；}
.group title{padding:8px；}
.group按钮{文本对齐：右；}
这是我的头衔
而且它工作得很好。它很简单，尽可能向后兼容（这可能在IE5上也能工作），而且它很有效。不要乱动定位或浮动

因此，如果没有向后兼容至少FF2和IE6的表，任何人都可以做同样的事情吗

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


它工作得很好。
只需左右浮动并设置为清除这两个选项，即可完成操作。不需要桌子

编辑：我知道我为此获得了很多赞成票，我相信我是对的。但在有些情况下，您只需要有表。你可以尝试用CSS做任何事情，它在现代浏览器中也能工作，但是如果你想支持旧的浏览器。。。我不想重复我的话，这里是和

Edit2:因为旧的浏览器不再那么有趣了，我在新项目中使用Twitter引导。它非常适合大多数布局需要，并且使用CSS。
左浮动标题，右浮动按钮，以及（这是我直到最近才知道的部分）-使它们都成为容器
{overflow:hidden}

无论如何，这应该可以避免z索引问题。如果它不起作用，并且您确实需要IE5支持，那么继续使用该表。
在div中执行双浮点运算并使用clearfix。您有任何填充/边距限制吗

<div class="clearfix">
   <div style="float:left">Title</div>
   <input type="button" value="Button" style="float:right" />
</div>


标题

标题
使用可用的工具快速、正确地完成工作没有什么错

在这种情况下，一张桌子工作得很好

我个人会用一张桌子来做这个

我认为应该避免使用嵌套表，因为这可能会导致混乱。
我建议不要在这种情况下使用表，因为这不是表格数据；这是纯粹的演示按钮位于最右边。这就是我复制您的表结构所要做的（更改为不同的H#，以适应您在站点层次结构中的位置）：


.group头{背景：黄色；缩放：1；填充：8px；}
.group头：{content:“.”之后显示：块；高度：0；清除：两者；可见性：隐藏；}
/*设宽
<div class="group-header">
    <input type="button" name="Button" value="Button" style="float:right" />
    <span>Title</span>
</div>

<style>
  .group-header { background: yellow; zoom: 1; padding: 8px; }
  .group-header:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
  /* set width appropriately to allow room for button */
  .group-header h3 { float: left; width: 300px; }
  /* set line-height or margins to align with h3 baseline or middle */
  .group-header input { float: right; }
</style>

<div class="group-header">
  <h3>This is my title</h3>
  <input type="button" value="Collapse"/>
</div>

.group-header, .group-content {
    width: 500px;
    margin: 0 auto;
}
.group-header{
    border: 1px solid red;
    background: yellow;
    overflow: hidden;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    padding: 8px 0;
}
.group-content{
    border: 1px solid black;
    background: #DDD;
}
.group-title {
    padding-left: 8px;
}
.group-buttons {
    padding-right: 8px
}