CSS三栏布局

一、前言

在之前的文章中，我曾经写到过CSS两栏布局（https://blog.csdn.net/qq_30216191/article/details/81050410）。今天，我利用相同的思路来实现三栏布局。所谓的三栏布局，一般指的是“左右侧定宽，中间部分自适应”，在这篇文章中，我们将采用5种方式来实现三栏布局。

在这里我们假设已经对所有元素设置了

margin:0;
padding:0;

二、布局方式

1.position布局

HTML代码如下：

<!--我们假设容器元素为body元素，实际情况，可自定义一个container -->
<body>
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</body>

CSS代码如下：

.left, .right {
  /* 假设定宽部分宽度为200px */
  width: 200px;
  /* 假设三者的高度都为300px */
  height: 300px;
  position: absolute;
  top: 0;
}

/* 左侧定位 */
.left {
  left: 0;
  background-color:red;
}

/* 中间自适应区 */
.center {
  height: 300px;
  position: absolute;
  top: 0;
  left: 200px;
  right: 200px;
  bottom: 0;
  background-color:blue;
}

/* 右侧定位 */
.right {
  right: 0;
  background-color:red;
}

代码逻辑方面还是比较清晰的，通过定位，将几个块放在一堆。不过其冗余度太高，而且维护成本和维护难度也相当之大。违背了DRY原则（Don't Repeat Yourself）。

2.float + calc 布局

HTML部分与position中一致。

CSS部分：

扫描二维码关注公众号，回复： 2750724 查看本文章

/* 三者共有样式 */
.left, .center, .right {
  height: 300px;
  float: left;
}

/* 左侧样式 */
.left {
  width: 200px;
  background-color:red;
}

/* 中间样式，关键在 calc */
.center {
  width: calc(100% - 400px);
  background-color:blue;
}

/* 右侧样式 */
.right {
  width: 200px;
  background-color:red;
}

该方式的逻辑还是挺简单的，三个块依次浮动，从而形成一行。关键部分在于 calc 属性，其可以动态计算值，在该例中，其用来计算 center 部分的宽度，其为父元素的宽度（100%）减去左右侧实际宽度之和（200 + 200 ），利用该属性，实现了自适应宽度布局。关于该属性的具体介绍，参看 https://www.w3cplus.com/css3/how-to-use-css3-calc-function.html 。

3.flex布局

HTML部分：

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

CSS部分：

/* 外层容器设置为 flex 布局 */
.container {
  width: 100%;
  height: 300px;
  display: flex;
}

/* 左右侧定宽处理 */ 
.left, .right {
  flex-basis:200px;
  background-color:red;
}

/* 中间部分自适应布局 */
.center {
  flex:auto;
  background-color:blue;
}

flex布局一如既往的灵活与简单。还是那句话，如果不用苦逼的兼容IE9及以下浏览器，愉快的使用flex布局吧。

4.grid布局

HTML代码部分与flex布局一致

CSS部分：

.container {
  width: 100%;
  height: 300px;
  display: grid; /* 设置为 grid 布局 */
  grid-template-columns: 200px auto 200px;/* 定义每列的宽度，左右200px，中间自适应 */
}
.left, .right {
  background-color:red;
}
.center {
  background-color:blue;
}

grid布局设置起来更方便，不过其兼容性确实较差，所以可以作为实验性功能使用。要查看效果，建议使用最新版的谷歌浏览器。另外，可以使用自动加前缀插件来优化代码。自动加前缀插件为 Autoprefixer，这里推荐其在线工具：https://autoprefixer.github.io 。

5.table布局

HTML与flex布局、grid布局一致

CSS部分：

.container {
  width: 100%;
  height: 300px;
  display: table;/* 设置为 table 布局 */
}

/* 将其子项设置为 table-cell 布局 */
.left, .center, .right {
  display: table-cell;
}
.left, .right {
  width: 200px;
  background-color:red;
}
.center {
  background-color:blue;
}

table布局很形象，就把其理解为一个表格。不过在实际运用中其实用得比较少。

三、总结

通过上文的分析，咱们可以有五种布局方式，以实现三栏布局。

position布局：兼容性好，不过维护和修改困难
float + calc 布局：必须要IE9以上浏览器才支持，遵循流式布局原理
flex布局：必须要IE9以上浏览器才支持，不过使用灵活、方便，推荐使用
grid布局：兼容性相对较差，可作为实验性功能
table布局：了解即可

要查看完整代码，请移步我的GitHub：https://github.com/JealynWang/css-three-columns-layout

猜你喜欢