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

概述我正在寻找一个3列css布局,中间有1个固定部分,周围有2个流体侧边栏： http://www.uploadup.com/di-UEFI.png 中间宽度为250px(例如),侧边栏(最小)宽度为150px.如果浏览器宽度超过550px(250 300),则侧边栏应具有更长的宽度. (中间总是250px) 什么是CSS可以做到的？兼容所有浏览器. 注意：我看到了this page,但我不知道如何根 我正在寻找一个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 – 如何创建3列流体固定流体布局？全部内容，希望文章能够帮你解决HTML – 如何创建3列流体固定流体布局？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。