圣杯三栏布局思路--小技巧-CFANZ编程社区

圣杯布局——三列布局

 1、html结构中——先主体内容后侧边栏；
 2、两侧固定宽度，中间内容宽度设置width: 100%;
 3、主体内容和左右侧边栏分别加浮动float: left;
 4、左侧设置margin-left: -100%;将左侧拉到最左边；右侧设置margin-left: -右侧边宽度；
 5、将中间露出来：在外面的大盒子上设置padding: 0 右侧边的宽度 0 左侧边宽度；
 6、分别为左侧边和右侧边设置position:relative; 左侧设置left:-左侧边的宽度;还原左侧边。
 7、右侧边设置right:-右侧边宽度;还原右侧边

示例1

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>圣杯布局实现思路</title>
    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      .clearfix::after{
        content: "";
        display: block;
        clear: both;
      }
      .clearfix{
        *zoom: 1;
      }
      .container{
        border: 1px solid #0000FF;
        padding-left: 200px;
        padding-right: 300px;
      }
      .left{
        float: left;
        width: 200px;
        height: 400px;
        background-color: red;

        margin-left: -100%;
        position: relative;
        left: -200px;
      }

      .right{
        float: left;
        width: 300px;
        height: 400px;
        background-color: blue;

        margin-left: -300px;
        position: relative;
        right: -300px;
      }
      .middle{
        float: left;
        width: 100%;
        height: 400px;
        background-color: #00BCC2;
      }
    </style>
  </head>
  <body>
    <div class="container clearfix">
      <!-- middle 是主要内容，想让他先加载，放到前面 -->
      <div class="middle"></div>
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </body>
</html>

示例2

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>圣杯布局</title>
    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      .clearfix::after{
        content: "";
        display: block;
        clear: both;
      }
      .clearfix{
        *zoom: 1;
      }
      .container>div{
        min-height: 300px;
      }
      .container{
        padding: 0 300px 0 200px;
      }
      .middle{
        float: left;
        width: 100%;
        background-color: #056EC8;

      }
      .left{
        float: left;
        width: 200px;
        background-color: #0084BB;

        margin-left: -100%;
        position: relative;
        left: -200px;
      }
      .right{
        float: left;
        width: 300px;
        background-color: #00AFC7;

        margin-left: -300px;
        position: relative;
        right: -300px;
      }
    </style>
  </head>
  <body>
    <div class="container clearfix">
      <div class="middle">中间内容</div>
      <div class="left">左边内容</div>
      <div class="right">右边内容</div>
    </div>
  </body>
</html>