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

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

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

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

第二种:margin负值

demo

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

第三种:自身浮动

demo

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

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

原文地址:https://www.cnblogs.com/newgold/p/4861094.html