实现三栏布局的几种方式

引言

最近写站碰到了三栏布局，这种局平常写的少一直没有总结过正好借这次机会总结一波，加深一下印象。

1. 绝对定位布局

   <div class="content">
       <!-- 优先渲染内容部分 -->
       <div class="content_m">
           内容部分
       </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; */
   }
   

   缺点：如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况

2. 圣杯布局

   <div class="content">
       <!-- 优先渲染 -->
       <div class="content_m">
           内容部分
       </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
   }
   

3. 双飞翼布局

   <div class="content">
       <!-- 优先渲染 -->
       <div class="main_con">
           <div class="content_m">
               内容部分
           </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
   }
   

4. 弹性盒子布局

   <div class="content">
       <div class="content_l">
           左侧部分
       </div>
       <div class="content_m">
           内容部分
       </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;
   }
   

对比圣杯布局和双飞翼布局

• 都是左右固定中间自适应的布局，中间部分优先渲染
• 解决方案基本一致，都是左浮动，然后解决中间部分别覆盖的问题。
• 解决中间部分内容覆盖时，圣杯布局设置父元素的padding，双飞翼布局在中间部分嵌套一个div，内容设置margin。实际上，双飞翼布局就是圣杯布局的改进方案。

总结

• pc端用双飞翼布局更好些
• 移动端用弹性布局更优雅