引言
最近寫站碰到了三欄布局,這種局平常寫的少一直沒有總結過正好借這次機會總結一波雁仲,加深一下印象仔夺。
-
絕對定位布局
<div class="content"> <!-- 優(yōu)先渲染內(nèi)容部分 --> <div class="content_m"> 內(nèi)容部分 </div> <div class="content_l"> 左側部分 </div> <div class="content_r"> 右側部分 </div> </div>
* { margin: 0; padding: 0; } /* 左右絕對定位 */ .content { position: relative } .content_l, .content_r { position: absolute; width: 100px; height: 100px; top: 0; } .content_l { left: 0; background: red; } .content_r { background: blue; right: 0; } .content_m { height: 100px; background: yellow; padding: 0 100px; /* 都可以 */ /* margin: 0 100px; */ }
缺點:如果中間欄含有最小寬度限制,或是含有寬度的內(nèi)部元素攒砖,當瀏覽器寬度小到一定程度缸兔,會發(fā)生層重疊的情況
-
圣杯布局
<div class="content"> <!-- 優(yōu)先渲染 --> <div class="content_m"> 內(nèi)容部分 </div> <div class="content_l"> 左側部分 </div> <div class="content_r"> 右側部分 </div> </div>
* { margin: 0; padding: 0; } .content { overflow: hidden; } .content>div { float: left; height: 100px; } .content_l, .content_r { width: 100px; } .content_m { background: yellow; width: 100%; padding: 0 100px; box-sizing: border-box; } .content_l { background: red; margin-left: -100%; } .content_r { background: blue; margin-left: -100px }
-
雙飛翼布局
<div class="content"> <!-- 優(yōu)先渲染 --> <div class="main_con"> <div class="content_m"> 內(nèi)容部分 </div> </div> <div class="content_l"> 左側部分 </div> <div class="content_r"> 右側部分 </div> </div>
* { margin: 0; padding: 0; } .content { overflow: hidden; } .content>div { float: left; height: 100px; } .content_l, .content_r { width: 100px; } .main_con{ width: 100%; height: 100px; } .content_m { background: yellow; width: 100%; height: 100%; margin: 0 100px; } .content_l { background: red; margin-left: -100%; } .content_r { background: blue; margin-left: -100px }
-
彈性盒子布局
<div class="content"> <div class="content_l"> 左側部分 </div> <div class="content_m"> 內(nèi)容部分 </div> <div class="content_r"> 右側部分 </div> </div>
* { margin: 0; padding: 0; } /* 采用彈性盒子 */ .content { overflow: hidden; display: flex; } .content_l, .content_r { width: 100px; height: 100px; } .content_l { background: red; } .content_r { background: blue; } .content_m { flex: 1; height: 100px; background: yellow; }
對比圣杯布局和雙飛翼布局
- 都是左右固定中間自適應的布局,中間部分優(yōu)先渲染
- 解決方案基本一致吹艇,都是左浮動惰蜜,然后解決中間部分別覆蓋的問題。
- 解決中間部分內(nèi)容覆蓋時受神,圣杯布局設置父元素的padding抛猖,雙飛翼布局在中間部分嵌套一個div,內(nèi)容設置margin鼻听。實際上财著,雙飛翼布局就是圣杯布局的改進方案。
總結
- pc端用雙飛翼布局更好些
- 移動端用彈性布局更優(yōu)雅