圣杯布局和淘宝双飞翼布局

2018-09-11 本文已影响28人技术体验师_萦回

圣杯布局和淘宝双飞翼布局的目的都是实现：左右两栏固定宽度，中间部分自适应。
差别：解决遮盖的方式有区别。
废话不多说直接开始撸demo。

圣杯布局

原理：

浮动
盒子模型
相对定位

代码：

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
   * {
     margin: 0;
     padding: 0;
   }

   .box {
     padding: 0 200px 0 200px;
     overflow: hidden;
   }

   .middle,
   .left,
   .right {
     float: left;
     min-height: 400px;
   }

   .middle {
     width: 100%;
     background: red;
   }

   .left,
   .right {
     width: 200px;
   }

   .left {
     background: yellow;
     margin-left: -100%;
     position: relative;
     left:-200px
   }

   .right {
     background: blue;
     margin-left: -200px;
     position: relative;
     right:-200px
   }
 </style>
</head>

<body>
 <div class='box'>
   <div class="middle">
     <h4>我是middle</h4>
     <p>我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分</p>
   </div>
   <div class="left">
     <h4>我是left</h4>
     <p>我是left的内容</p>
   </div>
   <div class="right">
     <h4>我是right的内容</h4>
     <p>我是right的内容</p>
   </div>
 </div>
</body>
</html>

解释一下：其中我们主要关注样式
我们把实现步骤分为三步：

使middle，left，right三个元素浮动

.box {
 padding: 0 200px 0 200px;
}
.left,
.right {
 width: 200px;
}
.middle {
 width: 100%;
 background: red;
}
.middle,
.left,
.right {
  float: left;
  min-height: 400px;  //  设置最小高度
}

middle，left，right 在一行显示

 .left {
   margin-left: -100%;  
 }
 .right {
   margin-left: -200px;
 }

解决遮盖

  .box {
     padding: 0 200px 0 200px;
     overflow: hidden;
   }
   .left {
     position: relative;
     left:-200px
   }
   .right {
     position: relative;
     right:-200px
   }

淘宝双飞翼布局

原理：

浮动
盒子模型
代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      overflow: hidden;
    }

    .middle,
    .left,
    .right {
      float: left;
      min-height: 400px;
    }

    .middle {
      width: 100%;
      background: red;
    }
    .middle-in{
       margin: 0 200px;
    }

    .left,
    .right {
      width: 200px;
    }

    .left {
      background: yellow;
      margin-left: -100%;
    }

    .right {
      background: blue;
      margin-left: -200px;
    }
  </style>
</head>

<body>
  <!-- https://www.cnblogs.com/imwtr/p/4441741.html -->
  <div class='box'>
    <div class="middle">
      <div class="middle-in">
        <h4>我是middle</h4>
        <p>我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分我是内容部分</p>
      </div>
    </div>
    <div class="left">
      <h4>我是left</h4>
      <p>我是left的内容</p>
    </div>
    <div class="right">
      <h4>我是right的内容</h4>
      <p>我是right的内容</p>
    </div>
  </div>
</body>

</html>

解释一下：双飞翼布局只是在解决遮盖时，与圣杯布局有差别。而且实现很简单：只是在内部元素添加margin即可

  .middle-in{
     margin: 0 200px;
  }

总结：
两种方式皆可实现，个人觉得第二种更简单。😊

圣杯布局和淘宝双飞翼布局

圣杯布局

淘宝双飞翼布局

猜你喜欢

热点阅读