CSS之中间固定两边自适应宽度

第一种：浮动布局实现

HTML：

这种方法我利用的就是浮动原理，左右定宽度分别进行左浮动和右浮动，此时主内容列（中间列没有定度）主会自动插入到左右两列的中间，最要注意的一点是，中间列一定要放在左右两列的后面，如上面的html代码所示，下面我们一起来看看其css样式是怎么实现的

CSS：

效果如图：

第二种：负的margin实现

HTML:

CSS:

这里先让’main’浮动，因为浮动存在包裹性所以后面紧跟着width的100%来保证其充满整个body，并且左右空出230px的距离预留给左右定宽的两列。’left’元素给予左浮动，因为此时它已经被挤到第二行，所以给予一个’margin-left’为负的100%让其向左偏移回到第一行且正好填补’main’留下的230px的定宽间距(注意这里margin-left/right的百分比都是根据父容器的宽度来决定)。那么’right’便是同样的道理

效果：

第三种：CSS3 Flexbox实现

HTML:

CSS:

效果：