双飞翼布局

最新推荐文章于 2024-09-16 23:05:35 发布

mufengs16

最新推荐文章于 2024-09-16 23:05:35 发布

阅读量170

点赞数

分类专栏： CSS2.0 文章标签： html css

本文链接：https://blog.csdn.net/qq_44087363/article/details/109563900

版权

CSS2.0 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

双飞翼布局

<!DOCTYPE html>
<html>
  <head>
    <title>双飞翼布局</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width initial-scale=1.0">
    <style type="text/css">
      * {
        margin:0;
        padding:0;
      }
      .content {
        overflow:hidden;
      }
      .box {
        padding-bottom:1000px;  /*伪等高布局的设置*/
        margin-bottom:-1000px;  /*伪等高布局的设置*/
      }
      .box1 {
        float:left;
        width:100%;
        background-color:greenyellow;
      }
      .box1 .middle {
        padding:0 300px 0 200px;
      }
      .box2 {
        margin-left:-100%;
        float:left;
        width:200px;
        background-color:indianred;
      }
      .box3 {
        margin-left:-300px;
        float:left;
        width:300px;
        background-color:deepskyblue;
      }
    </style>
  </head>
  <body>
    <div class="content">
      <div class="box1 box" >
        <div class="middle">
          <h3>这是双飞翼布局的使用方法</h3>
          <p>布局思路：中间栏作为主栏，要放在content整个盒子的最上面。
            利用浮动使3个div紧挨着排列。然后利用margin外边距调整左右两栏位于窗口两侧。
          </p> 
          <p>圣杯布局的做法：然而要达使中间栏的区域全部只位于中间位置，则需设置整个大盒子拥有左右2栏宽度相同的左右边距，
            使这个content盒子正好空出左右2栏的宽度，继而利用relative相对定位，使左右2栏复位。
          </p>
          <p>双飞翼布局的做法：在中间栏中div加入一个子元素，再使用padding使内容显示在中间栏。这样做不影响使用
           margin负值完成的整体布局。如果直接设置中间栏div的padding,则会打乱margin负值的布局。
          </p>
          <p>关于直接设置中间栏div的padding问题：padding会增加整个中间栏div的盒子宽度，是盒子宽度超过100%，
            margin-left:-100%,只会使box2边距到达box1整个盒子的内边距距离之外，无法实现贴在左边，故不可行之。
          </p>
        </div>
      </div>
      <div class="box2 box" >
        <p>左边栏的地方，伪等高布局排列</p>
      </div>
      <div class="box3 box">
        <p>右边栏的地方，伪等高布局排列</p>
      </div>
    </div>
  </body>
</html>

双飞翼布局与圣杯布局的总结

相同之处

中间栏作为主栏，要放在content整个盒子的最上面。
利用浮动使3个div紧挨着排列。然后利用margin外边距调整左右两栏位于窗口两侧。

不同之处

圣杯布局的做法：使中间栏的区域全部只位于中间位置，设置整个大盒子拥有左右2栏宽度相同的左右边距。
使这个content盒子正好空出左右2栏的宽度，继而利用relative相对定位，使左右2栏复位。
双飞翼布局的做法：在中间栏中div加入一个子元素，再使用padding使内容显示在中间栏。这样做不影响使用 margin负值完成的整体布局，如果直接设置中间栏div的padding,则会打乱margin负值的布局。
关于直接设置中间栏div的padding问题：padding会增加整个中间栏div的盒子宽度，是盒子宽度超过100%，margin-left:-100%,只会使box2边距到达box1整个盒子的内边距距离之外，无法实现贴在左边，故不可行之。