没有表格的 CSS 流体布局答案

【问题标题】：CSS fluid layout without tables没有表格的 CSS 流体布局
【发布时间】：2010-12-30 16:58:30
【问题描述】：

网上的一切都让我停止使用表格，我已经尽力做到这一点，但我遇到了一个问题，表格似乎是唯一的解决方案。我有 5 个内联块元素，我希望它们在 100% 的页面宽度上均匀分布。我在样式上设置了 20% 的宽度，并将边距和填充设置为零。当我查看页面时，除了添加到页面的水平滚动条之外，一切看起来都很好。如果我将这些元素放在一个 100% 宽度的 5 列表格中，这不是问题。在这种情况下，我需要使用表格还是有更好的解决方案？

顺便说一句，我在 Chrome 和 IE8 中都试过了。

更新：我发现在我的元素之间插入了约 5px 的间隙（通过在它们上放置背景颜色来发现）。我不知道为什么，因为我的风格中没有任何东西表明这一点：

<div class="links">
    <a href="#">Previous</a>
    <a href="#">Current</a>
    <a href="#">Next</a>
    <a href="#">01/01/2011</a>
    <a href="#">01/08/2011</a>
</div>

.链接 { 空白：nowrap；宽度：100%； }

.links { 显示：内联块；宽度：20%；填充：0；边距：0；白颜色; 背景颜色：#4C8331； }

另一个更新：

在 JMC Creative 指出我在几乎解决问题的锚之间放置空格的愚蠢错误之后，但现在滚动条只有一个像素。我看不出应该导致这种情况的继承样式。

【问题讨论】：

这是一个 hack，但您可以将每个框设置为 19.5% 并将 '.links' 边距设置为 0 auto，这将使其在页面上居中。
看起来 1px 滚动可能是 IE 独有的问题？在 Chrome 和 BlackBerry 浏览器中没有滚动条。
您可以简单地在 css 中设置 `overflow:hidden `，或者使其成为 IE 唯一规则（请参阅下面我编辑的答案）

标签： html css tablelayout

【解决方案1】：

尝试将它们放入容器中。像这样：

#container {
    margin: 0;
    padding: 0;
    width: 100%;
}

#boxes {
    float: left;
    width: 20%;
}

【讨论】：

可能更像 .boxes 而不是 #boxes
这会导致最后一个链接低于其余链接。我不想要换行符，这就是为什么我将它们设为内联块并将空格 nowrap 放在容器上。不过感谢您的提示！

【解决方案2】：

您的 html 标记在 a 标签之间有一个空格。因此，它被渲染为 5 个 20% 宽的块和 4 个大约 4px 的空间。所以你最终得到 100% + 16px。

编辑

为了解决IE中一直困扰你的滚动条问题，你可以这样设置条件注释：

<!--[if IE]>
<style type="text/css"> .links { overflow: hidden; } </style>
<![endif]-->

【讨论】：

这有所帮助，但仍然有一个轻微的卷轴，虽然没有那么重。
也许我们需要查看更多代码。到目前为止，我们得到的代码在这个小提琴中运行良好：jsfiddle.net/JMC_Creative/7G97D/1

【解决方案3】：

确保您的正文和 html 设置为 margin: 0; padding: 0;。

【讨论】：

【解决方案4】：

您是否尝试过使用溢出：隐藏？或者更具体地说是溢出-y：隐藏？

【讨论】：

这几乎可以工作，但由于某种原因，我的元素之间存在约 5px 的间隙。我想知道这是否是我首先遇到问题的原因......
你检查过firebug中的样式，看看它们是否继承了任何其他边距样式？

【解决方案5】：

你想漂浮你的锚。这样做works for me。

CSS：

.links {
    width: 100%;
}

.links>a {
    float: left;   
    display: inline-block;
    width: 20%;
    padding: 0;
    margin: 0;
    color: #fff;
    background-color: #4C8331;
}

HTML：

<div class="links">
    <a href="#">Previous</a>
    <a href="#">Current</a>
    <a href="#">Next</a>
    <a href="#">01/01/2011</a>
    <a href="#">01/08/2011</a>
</div>

如果页面上没有空间容纳所有锚点（即内容超出宽度），您可能会看到滚动条或看到一些锚点被包裹到另一行。我会注意到，我已经看到 IE 出错了，并且在不应该的时候错误地换行。这似乎是一个四舍五入的问题，可以解决。

【讨论】：