引言

最近寫站碰到了三欄布局，這種局平常寫的少一直沒有總結(jié)過正好借這次機會總結(jié)一波，加深一下印象。

1. 絕對定位布局

   <div class="content">
       <!-- 優(yōu)先渲染內(nèi)容部分 -->
       <div class="content_m">
           內(nèi)容部分
       </div>
       <div class="content_l">
           左側(cè)部分
       </div>
       <div class="content_r">
           右側(cè)部分
       </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)部元素，當(dāng)瀏覽器寬度小到一定程度，會發(fā)生層重疊的情況

2. 圣杯布局

   <div class="content">
       <!-- 優(yōu)先渲染 -->
       <div class="content_m">
           內(nèi)容部分
       </div>
       <div class="content_l">
           左側(cè)部分
       </div>
       <div class="content_r">
           右側(cè)部分
       </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
   }
   

3. 雙飛翼布局

   <div class="content">
       <!-- 優(yōu)先渲染 -->
       <div class="main_con">
           <div class="content_m">
               內(nèi)容部分
           </div>
       </div>
       <div class="content_l">
           左側(cè)部分
       </div>
       <div class="content_r">
           右側(cè)部分
       </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
   }
   

4. 彈性盒子布局

   <div class="content">
       <div class="content_l">
           左側(cè)部分
       </div>
       <div class="content_m">
           內(nèi)容部分
       </div>
       <div class="content_r">
           右側(cè)部分
       </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īng)的布局，中間部分優(yōu)先渲染
• 解決方案基本一致，都是左浮動，然后解決中間部分別覆蓋的問題。
• 解決中間部分內(nèi)容覆蓋時，圣杯布局設(shè)置父元素的padding，雙飛翼布局在中間部分嵌套一個div，內(nèi)容設(shè)置margin。實際上，雙飛翼布局就是圣杯布局的改進方案。

總結(jié)

• pc端用雙飛翼布局更好些
• 移動端用彈性布局更優(yōu)雅