重温圣杯布局和双飞翼布局的实现

发表于： 2022-10-21

字数：616 阅读：≈ 2分钟浏览：

前言

PC 端经常会用到三栏布局，而在之前常用的实现就是圣杯布局和双飞翼布局，两者的核心思想类似，只在最后处理中间内容撑开侧边栏的时候有些差异。

现在很少有必须使用圣杯和双飞翼的场景，但是对两者的大致实现还是有必要了解的。

下面会说一下两者的核心思想和实现，同时最后会附上 Flex 实现的三栏布局进行对比。

通用步骤

核心思想：内容优先，内容块在前，导航栏紧随其后。主要借助浮动和负margin值，将三栏拉齐到同一行。

第一步：写好基本样式

<div class="container">
  <main class="main">#Main</main>
  <nav class="left">#Left</nav>
  <nav class="right">#Right</nav>
</div>

.main {
  width: 100%;
  height: 500px;
  background-color: lightcoral;
}
.left,
.right {
  width: 150px;
  height: 500px;
  background-color: lightblue;
}

第二步：三栏浮动，容器清除浮动

.main,
.left,
.right {
  float: left;
}
.clearfix::after {
  content: " ";
  clear: both;
  display: block;
}

第三步：负 margin 拉侧边栏

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

接下来圣杯和双飞翼的处理方式不同，核心思想都是将内容栏正确显示出来。

圣杯

圣杯的处理方式纯靠 CSS 实现

第四步：容器 margin 预留两侧位置

.container {
  margin: 0 150px;
}

第五步：侧边栏设置相对移动，完成布局

.left {
  position: relative;
  left: -150px;
}
.right {
  position: relative;
  right: -150px;
}

双飞翼

而双飞翼添加了一个子元素，但 CSS 样式更简单

第四步：.main 添加子元素

<main class="main">
  <div class="content">#Content</div>
</main>

第五步：子元素 margin，把自己挤到中间，完成布局

.content {
  margin: 0 150px 0 150px;
}

附: Flex 实现三栏布局

HTML 的基本结构和圣杯与双飞翼一样

<div class="container">
  <main class="main">#Main</main>
  <nav class="left">#Left</nav>
  <nav class="right">#Right</nav>
</div>

CSS 样式也很简单：内容自适应增长，左右侧边栏固定宽度，最后使用 order 属性将左侧边栏提到前面即可

.container {
  display: flex;
}
.main {
  flex-grow: 1;
  background-color: lightcoral;
}
.left,
.right {
  flex-basis: 150px;
  background-color: lightblue;
}
.left {
  order: -1;
}

对比非常明显，使用 Flex 进行布局要简单太多了，所以说非特殊情况下，应优先考虑使用 Flex 进行三栏布局。

‍