圣杯布局实现

最新推荐文章于 2023-08-01 18:50:37 发布

观空自然

最新推荐文章于 2023-08-01 18:50:37 发布

阅读量4k

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/qq_45715615/article/details/123116503

版权

本文详细介绍了两种经典的前端布局技巧——圣杯布局和双飞翼布局。圣杯布局利用浮动和负边距，使页面实现三列布局，中间列固定宽度，两侧列自适应。双飞翼布局则通过中间列的margin实现两侧栏的位置，同样利用了浮动和负外边距。这两种布局方法在复杂页面结构中十分实用。

摘要由CSDN通过智能技术生成

圣杯布局，利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
</head>
<style>
  body {
    min-width: 550px;  /* 2x leftContent width + rightContent width */
    font-weight: bold;
    font-size: 20px;
  }

  #header, #footer {
    background: rgba(29, 27, 27, 0.726);
    text-align: center;
    height: 60px;
    line-height: 60px;
    clear: both;
  }
  #container{
      padding: 0 200px;
      overflow: hidden;
  }
  .column{
      height: 200px;
      float: left;
      position: relative;
  }
  #left{
      width: 200px;
      margin-left: -100%;
      left: -200px;
      background-color: aqua;
  }
  #right{
      width: 200px;
      margin-left: -200px;
      right: -200px;
      background-color: wheat;
  }
  #center{
      width: 100%;
      background-color: tomato;
  }
</style>

<body>
  <div id="header">#header</div>
  <div id="container">
    <div id="center" class="column">#center</div>
    <div id="left" class="column">#left</div>
    <div id="right" class="column">#right</div>
  </div>
  <div id="footer">#footer</div>
</body>

</html>

双飞翼布局，双飞翼布局相对于圣杯布局来说，左右位置的保留是通过中间列的 margin 值来实现的，而不是通过父元素的 padding 来实现的。本质上来说，也是通过浮动和外边距负值来实现的。

.counter {
  height: 100px;
}

.left {
  float: left;
  margin-left: -100%;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  float: left;
  margin-left: -200px;

  width: 200px;
  height: 100px;
  background: gold;
}

.wrapper {
  float: left;

  width: 100%;
  height: 100px;
  background: lightgreen;
}

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