多种方式实现两侧定宽，中间自适应布局

前端

2023-12-31 16:22:05

实现两侧定宽，中间自适应布局的终极指南

在现代网页设计中，实现两侧定宽，中间自适应布局已成为一种常见且至关重要的需求。这种布局可以为用户提供在不同屏幕尺寸下浏览网站的一致体验。本文将深入探讨实现这种布局的多种方法，包括它们的优缺点和适用场景。

圣杯布局

圣杯布局是实现两侧定宽，中间自适应布局的经典方法之一。它将父容器划分为三个子容器：左栏、中栏和右栏。左栏和右栏的宽度固定，而中栏则会根据可用空间进行自适应。

优点：

结构简单，易于理解和实现
在大多数情况下都能有效工作

缺点：

如果左右两栏的高度不同，中栏可能会错位
对于复杂的布局可能不适用

代码示例：

<div class="container">
  <div class="left-column">...</div>
  <div class="center-column">...</div>
  <div class="right-column">...</div>
</div>

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

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

.center-column {
  flex: 1;
  background-color: #ffffff;
}

双飞翼布局

双飞翼布局与圣杯布局类似，但它将中栏进一步细分为两个子容器，分别放置在左右两栏旁边。

优点：

避免了圣杯布局中中栏错位的问题
对于左右两栏高度不同的情况，可以更好地适应

缺点：

结构比圣杯布局更复杂
需要额外的 CSS 代码

代码示例：

<div class="container">
  <div class="left-column">...</div>
  <div class="center-left-column">...</div>
  <div class="center-right-column">...</div>
  <div class="right-column">...</div>
</div>

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

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

.center-left-column,
.center-right-column {
  flex: 1;
  background-color: #ffffff;
}

flex 布局

flex 布局是 CSS3 中引入的一种新的布局方式，它提供了更灵活和强大的布局功能。它允许您将父容器设置为 flex 布局，然后将左右两栏设置为 flex 项目，中栏设置为 flex 容器。

优点：

语法简单，易于理解
适用于各种复杂的布局
浏览器兼容性良好

缺点：

对于不支持 flex 布局的旧浏览器，可能需要使用后备布局

代码示例：

<div class="container">
  <div class="left-column">...</div>
  <div class="center-column">...</div>
  <div class="right-column">...</div>
</div>

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

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

.center-column {
  flex: 1;
  background-color: #ffffff;
}

grid 布局

grid 布局也是 CSS3 中引入的一种新的布局方式，它提供了一种更直观和易用的布局方法。它允许您将父容器划分为多个网格单元，然后将左右两栏设置为网格项目，中栏设置为网格容器。

优点：

语法更加直观和简洁
提供更高级的布局控制
浏览器兼容性良好

缺点：

对于不支持 grid 布局的旧浏览器，可能需要使用后备布局

代码示例：

<div class="container">
  <div class="left-column">...</div>
  <div class="center-column">...</div>
  <div class="right-column">...</div>
</div>

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  height: 100vh;
}

.left-column,
.right-column {
  background-color: #f0f0f0;
}

.center-column {
  background-color: #ffffff;
}

table 布局

table 布局是一种传统的方法，可以实现两侧定宽，中间自适应布局。它将父容器划分为三个单元格：左单元格、中单元格和右单元格。左单元格和右单元格的宽度固定，而中单元格则会根据可用空间进行自适应。

优点：

结构简单，易于理解和实现
浏览器兼容性非常好

缺点：

语义化程度较差，可能导致可访问性问题
对于复杂的布局可能不适用

代码示例：

<div class="container">
  <div class="left-column">...</div>
  <div class="center-column">...</div>
  <div class="right-column">...</div>
</div>

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

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

.center-column {
  width: auto;
  background-color: #ffffff;
}