css中的各类常见布局写法

前端作久了愈来愈感受css的博大精深，虽然css严格意义上算不上是一门编程语言，好比逻辑控制、循环操做、函数等都严重缺乏或不足，尽管目前有了很流行的sass、less等css预处理器以便于编写css，可是实际上css的难处在于它的特性，css的属性毕竟太多了，每种属性还有不一样的值，效果也各不相同。也难怪很多精通各类语言的大神看到css就头痛（好比这位）

在此总结一下遇到过的常见布局方式

两列布局

一、左侧固定，右侧宽度自适应

（1）经过浮动

https://jsfiddle.net/tgxh/yua2q93b/

（2）经过绝对定位

https://jsfiddle.net/tgxh/w1q7e0c1/

（3）经过BFC规则

https://jsfiddle.net/tgxh/vjqg1z11/

关于BFC规则，能够参考 深刻理解BFC和Margin Collapse

（4）使用flex（在移动端使用或者不考虑兼容性的话强烈推荐此方法）

https://jsfiddle.net/tgxh/ramoooLy/

 三列布局

一、左侧固定，中间和右侧各占剩余空间的50%

这个跟两列相似，只是右侧的再分红两列布局

右侧使用浮动

https://jsfiddle.net/tgxh/Lewv6axa/

右侧使用inline-block（若是两个div有换行，中间的空格是一个inline-block元素，也会占据空间，全部若是两个div设置为inline-block且宽度都是50%，那么会超出一行）

办法1：删除两个div的空格 https://jsfiddle.net/tgxh/bt8nv1f2/

办法2：父元素设置font-size为0，子元素另外设置font-size  https://jsfiddle.net/tgxh/gggzs3gw/

办法3：flex https://jsfiddle.net/tgxh/cdjr13jv/

二、左右固定，中间宽度自适应

办法1：经过浮动，左右分别左右浮动，中间设置左右margin，要点在于中间部分要放在底部  https://jsfiddle.net/tgxh/f0j9fsLy/

办法2：经过BFC，也是左右浮动，中间元素放在底部 https://jsfiddle.net/tgxh/bqsj9c4n/

办法3：经过flex，https://jsfiddle.net/tgxh/tuzbrv00/

 

小结一下，flex对于这类布局真是专治各类不服，想几列就几列，想哪一列或哪几列宽度固定也好自适应也好都毫无压力，关于flex的用法能够参见阮一峰老师的教程，相信我，用了以后你会爱上它的。