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的用法能夠參見阮一峯老師的教程，相信我，用了以後你會愛上它的。