3栏布局技巧

1. 流体布局

   主要内容无法优先加载，影响用户体验

   html结构，left,right，center，主要内容无法优先加载

      <div class="container1"><div class="col_left">left</div>  <div class="col_right">right</div><div class="col_center">center</div></div>

   css

        /* 左右浮动，中间加 margin */.col_left {width: 100px;background: rgb(7, 78, 119);float: left;}.col_right {width: 100px;background: rgb(39, 20, 20);float: right;}.col_center {height: 300px;background: green;margin: 0 100px;   /* ********大小等于侧边 width */}

2. BFC3栏布局

   主要内容无法优先加载，影响用户体验

    <div class="container1"><div class="col_left">left</div><div class="col_right">right</div><div class="col_center">center</div></div>

   css

      .col_left {width: 100px;height: 100px;background: red;float: left;  /* 左浮动*/}.col_right {width: 100px;height: 100px;background: green;float: right; /*右浮动*/}.col_center {height: 200px;background: blue;overflow: hidden;  /*块级格式化上下文 BFC */}

3. 双飞翼布局

   利用的是浮动元素 margin 负值的应用。主体内容可以优先加载，
   HTML 代码结构稍微复杂点。

    <div class="content"><div class="main"></div></div><div class="left"></div><div class="right"></div>

   css

        .content {float: left;width: 100%;  /*设置宽度，使得剩下元素下移*/}.main {height: 200px;margin-left: 110px;margin-right: 220px;background-color: green;}.left {float: left;height: 200px;width: 100px;margin-left: -100%;background-color: red;}.right {width: 200px;height: 200px;float: left;margin-left: -200px;background-color: blue;}

4. 圣杯布局

    <div class="container"><div class="main"></div><div class="left"></div><div class="right"></div></div>

   css

        .container {margin-left: 120px; /*设置盒子大小*/margin-right: 220px;/*设置盒子大小*/}.main {float: left;width: 100%;  /*设置盒子大小*/height: 300px;background-color: red;}.left {float: left;width: 100px;height: 300px;margin-left: -100%;position: relative;  /*相对定位*/left: -120px;   /**/background-color: blue;}.right {float: left;width: 200px;height: 300px;margin-left: -200px;position: relative;   /**/right: -220px;   /**/background-color: green;}

5. Flex 布局

    <div class="container"><div class="main"></div><div class="left"></div><div class="right"></div></div>

   css

      .container {display: flex;}.main {flex-grow: 1;height: 300px;background-color: red;}.left {order: -1;  /**/flex: 0 1 200px;margin-right: 20px;height: 300px;background-color: blue;}.right {flex: 0 1 100px;margin-left: 20px;height: 300px;background-color: green;}

6. 绝对定位

    <div class="container"><div class="main"></div><div class="left"></div><div class="right"></div></div>

          .container {position: relative;}.main {height: 400px;margin: 0 120px;background-color: green;}.left {position: absolute;width: 100px;height: 300px;left: 0;top: 0;background-color: red;}.right {position: absolute;width: 100px;height: 300px;background-color: blue;right: 0;top: 0;}

   原文：详解 CSS 七种三栏布局技巧