圣杯布局 | 双飞翼布局

一、圣杯布局

圣杯布局需要将中间栏放在前面优先渲染

圣杯布局利用浮动、负边距、相对定位来实现

  • 父元素 container 设置左右 padding 空出左右两栏位置。
  • 三栏均设置向左浮动,中间栏设置 width: 100%; ,即与父元素宽度一样,将左右两栏挤到下面。
  • 设置 margin 属性为负值将左右两栏移到上面,margin-left: -100%; 可以上移到上一行最左边, margin-left: -100px; 可以上移到上一行最右边(100px 是右边栏宽度)。
  • 利用相对定位,将左右两栏定位到两边
<div class = "container">
  <div class = "center">center</div>
  <div class = "left">left</div>
  <div class = "right">right</div>
</div>
.container {
  padding: 0px 100px;
  min-width: 300px;
  overflow: hidden;
}
.left {
  float: left;
  position: relative;
  left: -100px;
  margin-left: -100%;
  width: 100px;
  background-color: red;
}
.center {
  float: left;
  width: 100%;
  background-color: green;
}
.right {
  float: left;
  position: relative;
  left: 100px;
  margin-left: -100px;
  width: 100px;
  background-color: blue;
}

二、双飞翼布局

 双飞翼布局在中间栏增加了一个节点 inner 来使左右两侧的空间空开。

相对于圣杯布局,双飞翼布局左右两栏位置的保留通过设置中间栏的 margin 来实现,其他方面同样利用浮动和负边距实现

  • 三栏均设置向左浮动,中间栏设置 width: 100%;,将左右两栏挤到下面,同圣杯布局。
  • 设置 margin 属性为负值将左右两栏移到上面,同圣杯布局,此时左右两栏各在最左边和最右边。
  • 设置 inner 盒子的 margin 属性将两侧空开。
<div class="container">
  <div class="center">
    <div class="inner">inner</div>
  </div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>
.container {
  overflow: hidden;
}
.left {
  float: left;
  margin-left: -100%;
  width: 100px;
  background-color: red;
}
.center {
  float: left;
  width: 100%;
}
.inner {
  margin: 0px 100px;
  background-color: green;
}
.right {
  float: left;
  margin-left: -100px;
  width: 100px;
  background-color: blue;
}

 

 三、异同点

相同点:

(1)布局类似,都是实现特定需求的三列布局。

(2)都使用了float浮动向左脱离文档流,让左中右三列浮动,通过父外边距形成三列布局。

不同点:

  • 实现方法不同
    • 圣杯布局是通过float搭建布局+margin使三列布局到一行上+relative相对定位调整位置。
    • 双飞翼布局是通过float+margin,没有使用相对定位
  • 两列的位置不同
    • 圣杯布局是给外部容器加padding,通过相对定位把两边定位出来。
    • 双飞翼布局是靠在中间这层外面套一层divpadding将内容挤出来中间

 

参考资料:CSS 经典布局实现-圣杯布局、双飞翼布局 - 掘金 (juejin.cn)

 

posted @ 2023-06-20 14:27  有只小菜猫  阅读(1406)  评论(0)    收藏  举报