圣杯布局和双飞翼布局

LastStarDust
543 阅读2分钟

圣杯布局和双飞翼布局

  • 主要目的

    • 三栏布局，中间一栏最先加载和渲染（中间内容优先级较高）
    • 两侧宽度固定，中间内容随宽度自适应
    • 常用于电脑端页面

  • 布局要点

    • 使用float布局
    • 两侧使用margin负值，避免与中间内容横向重叠
    • 防止中间内容被两侧覆盖，圣杯布局使用padding，双飞翼布局使用margin

圣杯布局

  • 基本结构
<head>
    <style>
        .header,
        .footer {
          height: 50px;
          background-color: #cfcfcf;
          text-align: center;
        }
        .container .column {
          height: 50px;
        }
        .center {
          width: 100%;
          background-color: skyblue;
        }
        .left {
          width: 150px;
          background-color: #e44f26;
        }
        .right {
          width: 200px;
          background-color: green;
        }
    </style>
</head>
<body>
    <div class="header">header</div>
        <div class="container">
          <div class="center column">center</div>
          <div class="left column">left</div>
          <div class="right column">right</div>
        </div>
    <div class="footer">footer</div>
</body>

image.png

  • 把center放在最前面，可以先渲染出来，这里是内容区域。

  • 给容器元素container左右内边距, 两侧留白，内容往中间挤压，避免被覆盖，把padding-left设置为左侧盒子left宽度，padding-right为右侧盒子right的宽度

.container {
  min-width: 600px;
  padding-left: 150px;
  padding-right: 200px;
}

image.png

  • 给center，left， right三个盒子设置左浮动
.center,
.left,
.right {
  float: left;
}
/* 清除浮动 */
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.clearfix {
  *zoom: 1;
}
  • 并在他们的父元素上设置清除浮动。
<div class="container clearfix">
  <div class="center column">center</div>
  <div class="left column">left</div>
  <div class="right column">right</div>
</div>

  • 将左侧盒子left移动到center的左边

  • 给左侧盒子left设置margin-left: -100%, 往左边拖拽，拖拽距离为父元素的宽度，此时左侧盒子left与中间盒子center的左侧重叠。

  • 左侧盒子left设置position: relative和left: -150px; 相对当前位置往左边移动自身宽度的距离。

    .left {
  width: 150px;
  background-color: #e44f26;
  margin-left: -100%;
  position: relative;
  left: -150px;
}

    image.png

  • 将右侧盒子right移动到center的右边

  • 利用margin-right负值的特性，设置一个自身宽度的负值，挤压自身，让浏览器以为自己宽度为0

    .right {
 width: 200px;
 background-color: green;
 margin-right: -200px;
}

    image.png

  • 完整代码如下: 在线示例

<head>
  <title>05 圣杯布局</title>
  <style>
    .header,
    .footer {
      height: 50px;
      background-color: #cfcfcf;
      text-align: center;
    }
    .container {
      padding-left: 150px;
      padding-right: 200px;
    }
    .container .column {
      height: 50px;
    }
    .center {
      width: 100%;
      background-color: skyblue;
    }
    .left {
      width: 150px;
      background-color: #e44f26;
      margin-left: -100%;
      position: relative;
      left: -150px;
    }
    .right {
      width: 200px;
      background-color: green;
      margin-right: -200px;
    }
    .center,
    .left,
    .right {
      float: left;
    }
    /* 清除浮动 */
    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }
    .clearfix {
      *zoom: 1;
    }
  </style>
</head>

<body>
  <div class="header">header</div>
  <div class="container clearfix">
    <div class="center column">center</div>
    <div class="left column">left</div>
    <div class="right column">right</div>
  </div>
  <div class="footer">footer</div>
</body>
</html>

双飞翼布局

  • 基本结构
<head>
  <title>06 双飞翼布局</title>
  <style>
    .container {
      min-width: 600px;
    }
    .column {
      height: 50px;
    }
    .center {
      width: 100%;
      background-color: skyblue;
    }
    .center .main {
        background-color: #fcd000;
      height: 100%;
    }
    .left {
      width: 200px;
      background-color: #e44f26;
    }
    .right {
      width: 150px;
      background-color: green;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="center column">
      <div class="main">main</div>
    </div>
    <div class="left column">left</div>
    <div class="right column">right</div>
  </div>
</body>

image.png

  • 给center, left，right设置左浮动
.column {
  height: 50px;
  float: left;
}

image.png

  • 两侧留白：给main设置margin-left: 左侧盒子宽度和margin-right:右侧盒子宽度，避免内容被覆盖
.center .main {
  margin-left: 200px;
  margin-right: 150px;
}

image.png

  • 左侧盒子设置margin-left: -100%，和center重叠，刚好处于main左边
.left {
  width: 200px;
  background-color: #e44f26;
  margin-left: -100%;
}

image.png

  • 右侧盒子设置margin-left: 负的右侧盒子宽度，刚好处于main右边
.right {
  width: 150px;
  background-color: green;
  margin-left: -150px;
}

image.png

<head>
 <title>06 双飞翼布局</title>
 <style>
   .container {
     min-width: 600px;
   }
   .column {
     height: 50px;
     float: left;
   }
   .center {
     width: 100%;
     background-color: skyblue;
   }
   .left {
     width: 200px;
     background-color: #e44f26;
     margin-left: -100%;
   }
   .right {
     width: 150px;
     background-color: green;
     margin-left: -150px;
   }
   .center .main {
     margin-left: 200px;
     margin-right: 150px;
   }
 </style>
</head>
<body>
 <div class="container">
   <div class="center column">
     <div class="main">main</div>
   </div>
   <div class="left column">left</div>
   <div class="right column">right</div>
 </div>
</body>
</html>
avatar
文章
阅读
粉丝