如何用html+css实现五列布局,其中第二、四列的宽度随浏览器窗口变化

littuoha
  • 19

布局图

如图所示,前后灰色列宽度一定,为左右边距;中间三列为网页内容区,整体居中显示,其中橙色的两列分别相当于左边栏和右边栏,宽度会随浏览器窗口的变化而变化,蓝色列宽度则不变。
如何用html+css来实现?
楼下有人已经给了很好的回答,非常感谢!用的是css3的新特性。
我想知道如果用css2,应该怎么实现?

回复
阅读 10k
9 个回答
Humphry
  • 16.4k
✓ 已被采纳

CSS2的实现,兼容IE6+:

http://jsfiddle.net/humphry/kynUL/

http://jsfiddle.net/humphry/kynUL/show/拖到地址栏看看吧。

操作的时候注意以下几点:

  1. .sidebar-inner-l.sidebar-inner-r的左右padding加起来等于.main的宽度。
  2. .main的right值等于负.sidebar-inner-l的右padding值
  3. 这种方式仅仅能让.main基于页面的中轴定位
  4. 没有考虑水平宽度过窄的情形,一般而言有个最小值(如980px)。

IE9以上及标准浏览器就不说了,应该是很容易实现的。
IE6-8我写了个简单方案,初步测试了OK,欢迎讨论。
http://jsfiddle.net/ggwbzz/h2Xbd/

题主的标题是五列布局,可是为什么我只看到了三列布局。左右边距按理说不等价于两列布局。

多放两个div不就很简单么

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进