如何创建3柱流体固定流体布局？

Question

我正在寻找一个3列css布局,中间有1个固定部分,周围有2个流体侧边栏:

http://www.uploadup.com/di-UEFI.png

中间宽度为250px(例如),侧边栏(最小)宽度为150px.如果浏览器宽度超过550px(250 + 300),则侧边栏应具有更长的宽度.(中间总是250px)

什么是CSS可以做到的？兼容所有浏览器.

注意:我看到了这个页面,但我不知道如何改变它以满足我的愿望

Answer 1

您可以尝试使用inline-blocks.它们的使用相当少,但有时它们对布局非常有用.

所以,看看这个:http://jsfiddle.net/kizu/UUzE9/ - 用inline-blocks你可以用任意数量的固定和流体列创建布局.算法:

1. 首先,将填充等于所有固定列的总和添加到包装器.在你的情况下 - 250px.
2. 然后,添加min-width到包装器等于所有流体列的最小宽度的总和.
3. 然后,您添加white-space: nowrap到包装器,因此列不会跳转.
4. 然后只需添加所需的所有列.

如果您需要IE7及更低版本的支持,除了常见inline-block修复之外还有一些其他要知道的事项:

1. 您必须返回white-space: normal列的内部子项,否则列不会保留在一行上.
2. 在IE中可能会出现幻像滚动,也许有更好的方法可以删除它,但我只是使用overflow: hidden了一些包装器.

请享用 :)