圣杯布局和双飞翼布局

圣杯布局

1 html

  <div class="header"></div>
  <div class="content">
    <div class="middle"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
  <div class="footer"></div>

使用容器包含三个

  .header, .footer {
    height: 50px;
    width: 100%;
    background-color: grey;
  }
  .left {
    height: 200px;
    width: 200px;
    float: left;
    margin-left: -100%;
    position: relative;
    left: -200px;
    background-color:thistle
  }
  .content {
    padding: 0 200px;
    overflow: hidden;
    min-width: 200px;
  }
  .right {
    height: 200px;
    width: 200px;
    float: left;
    margin-left: -200px;
    position: relative;
    right: -200px;
    background-color:skyblue;
  }
  .middle {
    width: 100%;
    height: 200px;
    float: left;
    background-color: royalblue;
  }

注意点：1.容器设置padding， 2. 通过position方式 3. 最好设置最小宽度

双飞翼

1 html

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

容器只包裹一个main

2 css

.content {
  width: 100%;
  
  float: left;
}

.main {
  height: 200px;
  margin: 0 200px;
  background-color: grey;
}



.left {
  float: left;
  width: 200px;
  height: 200px;
  margin-left: -100%;
  background-color: red;
  
}

.right {
  float: left;
  width: 200px;
  height: 200px;
  margin-left: -200px;
  background-color: blue;
}

通过main的margin设置