我正在寻找一个 3 列的 CSS 布局，中间有 1 个固定部分，周围有 2 个流动侧边栏:
http://www.uploadup.com/di-UEFI.png
中间有 250 像素的宽度(例如)，侧边栏有(至少)150 像素的宽度。如果浏览器宽度超过 550px (250+300)，侧边栏应该有更长的宽度。 (中间总是 250px)
CSS能做什么呢？兼容所有浏览器。
注意:我看到了this page , 但我不知道如何根据我的意愿改变它
最佳答案
你可以尝试使用 inline-block 。它们很少使用，但有时它们非常适合布局。
所以，看看这个:http://jsfiddle.net/kizu/UUzE9/ — 使用 inline-block，您可以创建具有任意数量的固定列和可变列的布局。算法:
- 首先，您将等于所有固定列总和的填充添加到包装器。在您的情况下 —
250px。 - 然后，您将
min-width添加到包装器，等于所有流体列的 min-width 的总和。 - 然后，将
white-space: nowrap添加到包装器中，这样列就不会跳转。 - 然后只需添加您需要的所有列即可。
如果您需要对 IE7 及更低版本的支持，除了常见的 inline-block 修复之外，还有一些额外的事情需要了解:
- 您必须将
white-space: normal返回给列的内部子项，否则列将不会保持在一行上。 - 在 IE 中可能会出现一个幻影滚动，也许有更好的方法来删除它，但我只是在一些包装器上使用
overflow: hidden。
享受 :)
关于html - 如何创建 3 列流体固定流体布局？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7699552/