CSS（五）圣杯，双飞翼布局

双飞翼布局

  <style>

    *{

      margin:;

      padding:;

    }

    .main{

      width: 100%;

      height: 200px;

      background: pink;

      float: left;

    }

    .content{

      padding: 0 200px;

    }

    .left{

      height: 200px;

      width: 200px;

      background: blue;

      float: left;

      margin-left: -100%;

    }

    .right{

      width: 200px;

      height: 200px;

      background: yellow;

      float: left;

      margin-left: -200px;

    }

  </style>

  <div class="main">

    <div class="content">

      ...

    </div>

  </div>

  <div class="left"></div>

  <div class="right"></div>

这里用到了负边距先写中间的部分有一部分原因也是因为中间部分要优先显示

圣杯布局

    *{

      margin:;

      padding:;

    }

    .content{

      width: 100%;

      padding: 0 200px;

    }

    .main{

      width: 100%;

      height: 200px;

      background: red;

      float: left;

    }

    .left{

      width: 200px;

      height: 200px;

      background: pink;

      float: left;

      margin-left: -100%;

      position: relative;

      left: -200px;

    }

    .right{

      width: 200px;

      height: 200px;

      background: blue;

      float: left;

      margin-left: -200px;

      position: relative;

      right: 200px;

    }

  <div class="content">

      <div class="main"></div>

      <div class="left"></div>

      <div class="right"></div>

  </div>

圣杯与双飞翼布局的区别是 content 标签在哪里双飞翼在 main 里面这样 content 需要有 padding 如果中间这部分不止一个 content 就要写多个 padding 这样不划算也很不方便

所以圣杯是双飞翼的升级版其实也差不多就是 content 在最外层原理和双飞翼一样都是负边距他是给最外层的 content 设置了 padding 里面仍然是双飞翼不过就是让 ‘’翅膀‘’ 通过 reletave 定位来补上 content padding 空出来的部分

巴特西

CSS（五）圣杯，双飞翼布局

最新文章

热门文章