左边定宽,右边自适应布局的五种方法

需求:左右布局,左边定100px,右边自适应,中间20px间隙
下面为核心代码

1. float + margin

左边定宽,右边自适应布局的五种方法
左边定宽,右边自适应布局的五种方法
效果如下:
左边定宽,右边自适应布局的五种方法
这布局结构简单易写,缺点是支持 ie7及以上的浏览器,ie6下会出现3px的问题,解决此问题请看第2中布局 。

2.float + margin + (fix)

左边定宽,右边自适应布局的五种方法
左边定宽,右边自适应布局的五种方法
效果如下:
左边定宽,右边自适应布局的五种方法
此布局支持所有的浏览器,缺点是html结构多了点。

3. float + overflow

左边定宽,右边自适应布局的五种方法
左边定宽,右边自适应布局的五种方法
效果如下:
左边定宽,右边自适应布局的五种方法
此布局优点也是结构简单易写,缺点是ie6不支持,ie7及以上才支持。

4.table

左边定宽,右边自适应布局的五种方法
左边定宽,右边自适应布局的五种方法
效果如下:
左边定宽,右边自适应布局的五种方法

5.flex

左边定宽,右边自适应布局的五种方法
左边定宽,右边自适应布局的五种方法
效果如下:
左边定宽,右边自适应布局的五种方法
flex 布局仅支持ie9及以上的浏览器。

随便说下,定宽 定宽 自适应 等等相似布局 也是差不多的