CSS 之圣杯布局与双飞翼布局：巧妙构建网页三列架构

前端

2023-09-19 19:00:35

CSS 布局概述

网页布局是网页设计中必不可少的一环，其目的在于合理安排网页上的元素，以实现良好的视觉效果和用户体验。CSS 布局作为网页布局的主流技术，提供了丰富的布局属性和灵活的定位方式，可以帮助我们轻松构建出各种复杂的网页布局。

圣杯布局与双飞翼布局的异同

共同特点

圣杯布局和双飞翼布局都是经典的 CSS 布局方案，都能够实现三列布局的需求，即两侧内容宽度固定，中间内容宽度自适应。
这两种布局方式都采用浮动元素来实现列的排列，并使用外边距或负边距来控制列的间距。

差异

圣杯布局采用了一个包含元素来包含三列内容，而双飞翼布局采用了一个包含元素和两个相邻元素来实现三列布局。
圣杯布局的中间列通常使用浮动元素来实现自适应宽度，而双飞翼布局的中间列通常使用相对定位元素来实现自适应宽度。

如何选择合适的布局方式

在选择圣杯布局还是双飞翼布局时，我们需要根据具体需求来考虑。

如果需要在中间列中放置一个自适应宽度的元素，例如文本段落或图像，那么圣杯布局可能是一个更好的选择。
如果需要在中间列中放置多个固定宽度的元素，例如按钮或列表，那么双飞翼布局可能是一个更好的选择。

代码示例

圣杯布局

<div class="container">
  <div class="sidebar left"></div>
  <div class="content"></div>
  <div class="sidebar right"></div>
</div>

.container {
  width: 100%;
}

.sidebar {
  float: left;
  width: 200px;
}

.content {
  float: left;
  width: calc(100% - 400px);
}

.sidebar.right {
  float: right;
}

双飞翼布局

<div class="container">
  <div class="wrapper">
    <div class="sidebar left"></div>
    <div class="content"></div>
    <div class="sidebar right"></div>
  </div>
</div>

.container {
  width: 100%;
}

.wrapper {
  position: relative;
  width: 100%;
}

.sidebar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 200px;
}

.content {
  position: relative;
  left: 200px;
  right: 200px;
}

.sidebar.right {
  left: auto;
  right: 0;
}