圣杯&双飞翼布局

传统网站三栏布局需要实现中间宽度自适应、左右两栏定宽且优先渲染中间部分区域的目的通常采用圣杯或者双飞翼布局。

圣杯布局

• HTML布局

  <div class="main">
    <div class="container">CONTAINER</div>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
  </div>

• CSS样式

.main {
    padding: 0 300px 0 200px;
  }
  .container, .left, .right {
    float: left;
    min-height: 300px;
    line-height: 300px;
    text-align: center;
  }
  .container {
    width: 100%;
    min-width: 200px;
    height: 400px;
    background-color: rgb(78, 126, 228);
  }
  .left {
    position: relative;
    left: -200px;
    margin-left: -100%;
    width: 200px;
    background-color: coral;
  }
  .right {
    position: relative;
    right: -300px;
    margin-left: -300px;
    width: 300px;
    background-color: rgb(80, 255, 130);
  }

双飞翼布局

• HTML布局

  <div class="main">
    <div class="wrap">
      <div class="container">CONTAINER</div>
    </div>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
  </div>

• CSS样式

.wrap {
    float: left;
    width: 100%;
    height: 400px;
    background-color: rgb(78, 126, 228);
  }
  .left, .right {
    float: left;
    min-height: 300px;
    line-height: 300px;
    text-align: center;
  }
  .container {
    margin: 0 300px 0 200px;
    height: 100%;
    line-height: 300px;
    text-align: center;
  }
  .left {
    margin-left: -100%;
    width: 200px;
    background-color: coral;
  }
  .right {
    margin-left: -300px;
    width: 300px;
    background-color: rgb(80, 255, 130);
  }