三列布局之圣杯与双飞翼：未知的布局秘密

2023-11-06 04:26:22

三列布局之圣杯布局与双飞翼布局：不为人知的秘诀

三列布局在网页设计中非常常见，大家在浏览淘宝、豆瓣等网站时，经常会看到三栏式的布局。其中，圣杯布局和双飞翼布局是两大经典的三列布局方案。对于不少大厂来说，这两个布局是面试中常被问及的问题。本文将深入浅出地介绍圣杯布局和双飞翼布局的原理和应用场景，助力你提升网页设计技能。

三列布局的原理

三列布局的基本原理是使用浮动和 margin 实现。浮动能让元素脱离文档流，自由地上下移动。margin 则用于设置元素的外边距，控制元素之间的间距。

在三列布局中，中间栏通常设置为浮动，左右两栏设置为 margin 负值，使其紧贴中间栏。这样一来，无论中间栏的宽度如何变化，左右栏始终保持固定宽度。

圣杯布局

圣杯布局是三列布局的经典方案之一，它的特点是结构清晰，易于理解。圣杯布局的 HTML 结构如下：

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

圣杯布局的 CSS 代码如下：

.container {
  display: flex;
  height: 100vh;
}

.sidebar-left, .sidebar-right {
  width: 200px;
  background-color: #f0f0f0;
}

.content {
  flex: 1;
  background-color: #fff;
}

双飞翼布局

双飞翼布局是圣杯布局的改进方案，它解决了圣杯布局在 IE6 中兼容性问题。双飞翼布局的 HTML 结构如下：

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

双飞翼布局的 CSS 代码如下：

.container {
  display: flex;
  height: 100vh;
}

.sidebar-left, .sidebar-right {
  width: 200px;
  background-color: #f0f0f0;
}

.sidebar-left-inner, .sidebar-right-inner {
  height: 100%;
  background-color: #fff;
}