HTML – 如何创建3列流体固定流体布局?

前端之家收集整理的这篇文章主要介绍了HTML – 如何创建3列流体固定流体布局?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在寻找一个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:隐藏在某个包装器上.

请享用 :)

猜你在找的HTML相关文章