1.如何實現三欄布局
父元素包含3個子元素，左右各個100，中間自適應顯示，中間列內容可以完整顯示
① 使用定位，左右兩列通過絕對定位的偏移量定位到左右的位置，中間內容要加padding或者margin，不然中間列的內容有一部分會被左邊的列遮住
#left
② 不使用定位，兩邊左右浮動，中間設定margin-left和margin-right，因為脫離文件流，所以main放在最後
/*浮動定位
*/.float .left .float .right .float .main
③ 聖杯布局：主體部分要放在最前面，之後才是left和right塊，全部左浮動，左右設定position:relative，left/right為-120px,中間寬度設定為100%，父元素設定ie盒模型box-sizing:border-box,並要設定左右padding，並且清除浮動
/*聖杯布局
*/.shengbei .main, .shengbei .left, .shengbei .right .shengbei .left .shengbei .right .shengbei .main
/*這裡用了box-sizing， 相容性不是很好
*/.shengbei.clearfix .clearfix::after
<div
class
="container shengbei clearfix"
>
<
div
class
="main"
>聖杯布局，main放在最前面，最開始渲染
div>
<
div
class
="left"
>left
div>
<
div
class
="right"
>right
div>
div>
④ 雙飛翼布局：左中右全部左浮動，左邊設定margin-left:-100%（從第二行往左邊退到上一行開頭），右邊設定margin-left:-100px(從第二行開頭退到上一行末尾)，中間inner部分設定左右寬度margin
/*雙飛翼布局
*/.fly .main .fly .main, .fly .left, .fly .right .fly .left .fly .right .fly .main .inner
<div
class
="container fly clearfix"
>
<
div
class
="main"
>
<
div
class
="inner"
>
雙飛翼布局: 注意取消main的背景顏色，設定inner的顏色和高度。
div>
div>
<
div
class
="left"
>
div>
<
div
class
="right"
>
div>
div>
⑤ bfc布局：左邊左浮動，設定margin-right：20px 隔開與中間的距離,右邊右浮動，設定margin-left:20px隔開與中間的距離，中間設定overflow:hidden觸發bfc
/*bfc布局
*/.bfc .left .bfc .right .bfc .main
⑥ flex布局
左右固定中間自適應，父元素設定display: flex, 左右分別設定flex: 0 0 200px ，父元素為display:flex
如何實現兩欄布局,三欄布局,水平 垂直居中
先寫一下樣式 box left 左 right 右 使用float margin方式實現 還可以使用position實現 div left right 也可以使用flex實現 div box left right 先寫樣式 box left 左 right 右 center 中 使用float ma...
如何實現三欄式布局
在解析度不同的情況下，使用流動性布局是乙個很好地選擇，本文介紹常見的幾種實現自適應的外部架構 1.絕對定位 左右兩邊採用絕對定位的方式固定在兩側，中間部分利用margin來實現自適應寬度。id left div id middle div id right div left right middle...
CSS實現 兩欄布局，三欄布局
aside div main div div aside main 左側欄固定寬度向左浮動，右側主要內容則用margin left留出左側欄的寬度，預設寬度為auto，自動填滿剩下的寬度。右側固定寬度，左側自適應則是同理，只要將固定欄右浮動，使用margin right空出其寬度即可。aside d...