实现圣杯布局和双飞翼布局 #23

MaMaFish · 2020-06-15T07:30:15Z

圣杯布局与双飞翼布局的对比

相同点：

都是通过左浮动实现三栏布局，中间栏放最前面，保证优先渲染。
都是通过负的 margin-left 把下方的浮动元素拉上去。

不同点：

圣杯布局通过设置 center 两侧 padding 来给 left, right 腾位置。而双飞翼是 center 100%宽度不变，通过设置其内部子元素的左右 margin 来腾位置。
圣杯布局 left, right 会用到相对布局，而双飞翼不会，但是会增加一个 div。

实现圣杯布局

第一种：利用float

效果是这样的：

<html>
  <style>
    .header, .footer {
      height: 100px;
      background-color: lightblue;
    }
    .center {
      height: 100%;
      width: 100%;
      background-color: green;
    }
    .left {
      left: -100px;
      width: 100px;
      height: 100%;
      margin-left: -100%;
      background-color: red;
    }
    .right {
      left: 200px;
      width: 200px;
      height: 100%;
      margin-left: -200px;
      background-color: yellow;
    }
    .wrapper >div{
      position: relative;
      float: left;
      height: 800px;
    }
    .footer {
      clear: both;
    }
    .wrapper {
      padding: 0 200px 0 100px;
    }
  </style>
  <body>
    <div class="header"></div>
    <div class="wrapper">
      <div class="center"></div>
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="footer"></div>
  </body>
</html>

第二种：利用flex

<html>
  <style>
    .header, .footer {
      height: 100px;
      background-color: lightblue;
    }
    .center {
      flex: 1;
      height: 100%;
      background-color: green;
    }
    .left {
      width: 100px;
      height: 100%;
      background-color: red;
    }
    .right {
      width: 200px;
      height: 100%;
      background-color: yellow;
    }
    .wrapper {
      display: flex;
      height: 800px;
    }
  </style>
  <body>
    <div class="header"></div>
    <div class="wrapper">
      <div class="left"></div>
      <div class="center"></div>
      <div class="right"></div>
    </div>
    <div class="footer"></div>
  </body>
</html>

实现双飞翼布局

<html>
  <style>
    .header, .footer {
      height: 100px;
      background-color: lightblue;
    }
    .inner {
      margin: 0 200px 0 100px;
      height: 100%;
      background-color: green;
    }
    .left {
      width: 100px;
      margin-left: -100%;
      background-color: red;
    }
    .right {
      width: 200px;
      margin-left: -200px;
      background-color: yellow;
    }
    .wrapper >div {
      float: left;
      height: 800px;
    }
    .footer {
      clear: both;
    }
    .center {
      width: 100%;
    }
  </style>
  <body>
    <div class="header"></div>
    <div class="wrapper">
      <div class="center">
        <div class="inner"></div>
      </div>
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="footer"></div>
  </body>
</html>

MaMaFish changed the title ~~第23题：实现圣杯布局~~ 第23题：实现圣杯布局和双飞翼布局 Jun 19, 2020

MaMaFish changed the title ~~第23题：实现圣杯布局和双飞翼布局~~ 实现圣杯布局和双飞翼布局 Jan 7, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

实现圣杯布局和双飞翼布局 #23

实现圣杯布局和双飞翼布局 #23

MaMaFish commented Jun 15, 2020 •

edited

Loading

实现圣杯布局和双飞翼布局 #23

实现圣杯布局和双飞翼布局 #23

Comments

MaMaFish commented Jun 15, 2020 • edited Loading

圣杯布局与双飞翼布局的对比

实现圣杯布局

第一种：利用float

第二种：利用flex

实现双飞翼布局

MaMaFish commented Jun 15, 2020 •

edited

Loading