我正在寻找一个3列css布局,中间有1个固定部分,周围有2个流体侧边栏:
http://www.uploadup.com/di-UEFI.png
中间宽度为250px(例如),侧边栏(最小)宽度为150px.如果浏览器宽度超过550px(250 300),则侧边栏应具有更长的宽度. (中间总是250px)
什么是CSS可以做到的?兼容所有浏览器.
注意:我看到了this page,但我不知道如何根据我的意愿改变它
解决方法
您可以尝试使用内联块.它们的使用相当少,但有时它们对布局非常有用.
所以,看看这个:http://jsfiddle.net/kizu/UUzE9/ – 使用内联块,您可以创建具有任意数量的固定和流体列的布局.算法:
>首先,将填充等于所有固定列的总和添加到包装器.在你的情况下 – 250px.
>然后,将min-width添加到包装器中,等于所有流体列的最小宽度之和.
>然后,在包装器中添加white-space:nowrap,这样列就不会跳转.
>然后只需添加所需的所有列.
如果您需要IE7及更低版本的支持,除了常见的内联块修复之外,还有一些其他的事情要知道:
>您必须返回空格:垂直于列的内部子节点,或者列不会保留在一行上.
> IE中可能会出现幻像滚动,也许有更好的方法可以删除它,但我只是使用overflow:隐藏在某个包装器上.
请享用 :)