首页 > Web开发 > 详细

左中右三栏网页宽度自适应布局方法

时间:2015-10-08 16:05:29      阅读:190      评论:0      收藏:0      [点我收藏+]

三种方法:绝对定位、margin负值、自身浮动。代码简洁实用,无兼容问题。
  
第一种:绝对定位

demo
div标签的顺序随意,在CSS里都有位置设置,接下来的两个方法对顺序有要求。

如果中间栏或内部元素设置了宽度,浏览器宽度过小的情况下会出现重叠。

 

第二种:margin负值

demo

代码较难理解,有一定抗性——布局不易受内部影响,但一旦出现bug不易排查。

 

第三种:自身浮动

demo

代码简洁高效,但因为使用的浮动属性,所以中间栏要避免使用clear:both

 

最后吐槽下cnblogs,我无法引用codepen的在线演示啊!!!

左中右三栏网页宽度自适应布局方法

原文:http://www.cnblogs.com/newgold/p/4861094.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!