多列布局之定宽+自适应

多列布局之定宽+自适应

说明

本文所述仅为主要样式

具体样式和HTML文件，请点击https://github.com/smilehht/Page-Framework/tree/master/Page%20framework/%E5%A4%9A%E5%88%97%E5%B8%83%E5%B1%80/1.%E5%AE%9A%E5%AE%BD%E5%8A%A0%E8%87%AA%E9%80%82%E5%BA%94

1、float+margin——单侧浮动

.left { float：left; width : 200px; }
.right{ margin-left : 220px; }

优点：

兼容性好

缺点：

.right清除浮动会产生bug（右侧会掉下去）

2、float+margin——双侧浮动

.left { float：left; width : 200px ; position : relative ; }
.right-parent{ float：right； width：100%；margin-left：-200px； }
.right-child{ margin-left : 220px; }

position:relative;——提高left的层级，因为right-parent也会浮动，会覆盖left与right部分无法显示在同一个高度上

优点：

兼容性好

缺点：

样式较多

3、flow+overflow

.left { float : left ; width:200px; margin-right : 20px ; }
.right { overflow : hidden ; }

overflow:hidden——触发BFC模式内部与外部隔离（如浮动元素不会影响BFC中的内容）

优点：

代码简单

缺点：

IE6不支持

4、table布局

.parent{ display : table ; width : 100% ; table-layout : fixed ; }
.left , .right { display : table-cell ; }
.left { width : 200px ; padding-right : 20px ; }

width：100%——table默认宽度随内容而定
table-layout：fixed——加速table的渲染，且实现了布局优先
display：table-cell——实现了单元格在同一行排列

5、flex布局

.parent { display：flex； }
.left { width：100px；margin-left：20px； }
.right { flex：1； }

缺点：

兼容性不好