布局包

我想尝试一下几种常见的、使用 CSS 时非常古怪的多列流体宽度布局样式。

实现多列流体布局的一种方法是使用百分比设置列宽。例如，将左侧列的宽度设置为 19%，右侧列的宽度设置为 80%（保持总宽度低于 100% 可以防止它们相互碰撞并导致布局错乱）。我真的很不喜欢这种方法。它会阻止您在这些列上使用基于像素的填充（存在问题），导致需要额外的 div。更糟糕的是，这两列之间的“间距”会随着浏览器窗口大小的变化而变化，因此在浏览器窗口最窄时，1% 太窄了，而在窗口最宽时，它又太宽了。

一个更好的流体宽度技术（假设您只希望其中一列是“流体”列）是完全不依赖百分比，而是使用单个列的最小和最大宽度。事实上，这单个列实际上并不是一列，而是布局的整个宽度。内部内容可以通过填充从边缘推开，从而为绝对定位的侧边栏腾出空间。

此技术有很多好处

• 不使用浮动意味着布局更稳定。不用担心列会因其包含的内容而扩展和破坏
• 可以一致地控制列之间的间距
• 通常基于像素，允许基于像素的填充/边距

有关此处所用理论的详细说明，请查看 Dan Rubin 的 绝对列。这些非常相似，只是将该理念扩展到流体宽度。

查看演示

• 固定，流体
• 固定，流体，固定
• 流体，固定
• 一半一半*

下载全部

IE 6

我相信你们中的大多数人立即想到了 IE 6 中存在的各种问题。我们非常清楚，min/max-width 在 IE 6 中不起作用。并且为这些侧边栏设置 top/left/bottom 或 height: 100% 也无法正常工作。那么我们该怎么办呢？

有很多方法可以解决这个问题，您只需要评估您自己网站上的具体情况以确定如何解决。也许您不介意 min-max-width 出现问题（在 IE 6 中发生的情况是最大宽度为 100%，最小宽度为 0%）。也许您的侧边栏颜色相同，因此您不关心它们是否会一直延伸到底部。

我认为处理 IE 6 最优雅的解决方案（正如 Dan 在其 Absolute Columns 文章中建议的那样）是 Dean Edwards 的 IE7.js 脚本。只需将这个小片段放在 head 部分，您的问题就解决了

<!--[if lt IE 7]>
    <script src="//ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

测试

我已经在 IE 6 及更高版本以及我安装的所有其他流行浏览器中查看了这些布局，并且它们在所有浏览器中都能正常工作。如果您遇到问题，请告诉我，我们可以一起寻找解决方案。

*“一半一半”使用了百分比，这与其他示例的理论不符（但仍然可能有用）。