一个好的css布局对于一个页面的重要程度，相信大家心里都明白。
完成一个两栏，三栏，等高等布局，在页面总是非常常见。所以我这边总结了一些方法。

两栏布局

一栏定宽，一栏自动

思路一：float + margin

左边设定宽度并左浮动 float:left
右边只需要设定margin-left:左边的宽度

思路二：position + margin

左边定义宽度并设置成绝对定位 position:absolute
右边 margin-left:左边的宽度

思路三：flex

父级div设定 display:flex
左边设置宽度
右边 flex:1

三栏布局

两侧定宽，中间自动

思路一：float+margin

左右两侧分别浮动左右（或者是绝对定位，参考 一栏顶宽 的思路二）
中间 margin : 0 右边宽度 0 左边宽度

思路二：float + 负margin

中间在另一个div里面嵌套
左边 margin:-100%
右边 margin:-自身宽度

思路三： float+flex (flex有兼容问题)

在父级设定 display:flex
中间的div flex:1
(假设中间的最小在100px的时候)

两侧自动，中间定宽

思路一：

左右两栏的父div分别设置自己宽度 width:50%,分别占据左右两边。
子div（也就是他们的 .left .right）左边的子div右边距为中间宽度的一半，右边的左边距也为中间宽度一半。
这样他们刚好就留出中间的宽度来了
中间的div：就按照css居中一个div的方法，将中间的div居中， 并且是绝对定位，然后设置 z-index防止被覆盖

思路二：flex（有兼容问题）

中间的定宽，左右分别占据剩下盒子的一半，平分

好啦，这次咱们先说这些，下一篇我会说说定高度布局问题