三栏布局.md

三栏布局

三栏布局，左右两栏宽度固定，中间栏宽度自适应。

假设我们有以下 HTML 结构：

<div class="container">
  <aside class="left"></aside>
  <article class="content"></article>
  <aside class="right"></aside>
</div>

基本样式如下：

html,
body {
  height: 100%;
  margin: 0;
}

.container,
.left,
.right,
.content {
  height: 100%;
  overflow: auto;
}

本文将介绍几种实现三栏布局的方式。

使用 float

.left {
  width: 210px;
  float: left;
}

.right {
  float: right;
  width: 210px;
}

这里会有一点不一样，我们需要调整一下类为 .right 标签的位置。

<aside class="left"></aside>
<aside class="right"></aside>
<article class="content"></article>

注意：使用 float 实现的三栏布局挤压到一定的宽度时，也会存在发生变形情况，这时需要额外进行处理。

使用 position

.container {
  position: relative;
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  width: 210px;
}

.content {
  margin: 0 210px;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  width: 210px;
}

使用 flex

.container {
  display: flex;
}

.left {
  width: 210px;
}

.content {
  flex: 1;
}

.right {
  width: 210px;
}

使用 grid

.container {
  display: grid;
  grid-template-columns: 210px 1fr 210px;
}

查看效果