三栏布局的常见方案

143 阅读4分钟

三栏布局的常见方案

要求:左右两栏宽度 200px,中间自适应。

本文主要介绍了以下四种三栏布局方案:

  1. flex 布局(CSS3)
  2. grid 布局(CSS3)
  3. 定位布局
  4. 浮动布局
  5. 浮动布局的扩展

1.三栏布局:左右两栏宽度 200px,中间自适应。

公共的 html 代码:

<div class="container">
  <div class="left">左侧固定区域</div>
  <div class="right">右侧固定区域</div>
  <div class="main">中间自适应区域</div>
</div>

本文中我们 html 中父容器中的 div 的书写顺序是:左右中,所以 flex 布局与 grid 布局需要使用 order 属性来进行特殊处理,平时开发时推荐 div 顺序直接写为左中右,则可省去 order 属性调整的步骤。

1.1 flex 布局

对 flex 布局不熟悉的读者,可以参阅我之前写的博客CSS3 弹性盒(flex)布局

flex 布局方案实现起来非常简单,也是平时开发使用最多的方案。

order属性定义项目的排列顺序。数值越小,排列越靠前,默认为 0。

/* 公共样式代码 */
body,
html {
  padding: 0;
  margin: 0;
}
div {
  height: 500px;
}
/*flex 布局核心代码*/
.container {
  display: flex;
}
.left,
.right {
  flex: 0 0 200px; /* flex-grow flex-shrink flex-basis*/
  background: pink;
}
.left {
  order: 1; /*定义项目的排列顺序*/
}
.right {
  order: 3;
}
.main {
  flex: 1 0 auto; /* flex-grow flex-shrink flex-basis*/
  background: lightblue;
  order: 2;
}

1.2 grid 布局

对 grid 布局不熟悉的读者,可以参阅MDN-grid

grid 布局方案实现也很简单,但在平时开发使用 flex 布局就可以解决大部分问题,所以使用 grid 布局使用较少。

/* 公共样式代码 */
body,
html {
  padding: 0;
  margin: 0;
}
div {
  height: 500px;
}
/*grid 布局核心代码*/
.container {
  display: grid;
  grid-template-columns: 200px auto 200px; /*每列宽度*/
}
.left,
.right {
  background: pink;
}
.left {
  order: 1; /*定义项目的排列顺序*/
}
.right {
  order: 3;
}
.main {
  background: lightblue;
  order: 2;
}

1.3 定位布局

对定位布局不熟悉的读者,可以参阅MDN-position

定位布局的大致思路就是:

  • 子绝父相: 父容器设为相对定位,左右两栏设为绝对定位
  • 设置宽度:左右两栏宽度设为 200px;中间区域使用 margin 属性预留左右两栏的宽度,并使中间区域宽度自适应,将 margin 设为 0 200px。
  • 设置偏移:左侧向左偏移,将 left 属性 设为 0;右侧向右偏移,将 right 属性 设为 0。
/* 公共样式代码 */
body,
html {
  padding: 0;
  margin: 0;
}
div {
  height: 500px;
}
/* position + margin 方案核心代码 */
.container {
  position: relative;
}
.left,
.right {
  position: absolute;
  top: 0;
  background: pink;
  width: 200px;
}
.left {
  left: 0;
}
.right {
  right: 0;
  width: 200px;
}
.main {
  margin: 0 200px;
  background: lightblue;
}

1.4 浮动布局

对浮动布局不熟悉的读者,可以参阅MDN-float

浮动布局的大致思路就是:

  • 设置浮动:左侧向左浮动,将float 属性设为 left;右侧向右浮动,将 float 属性 设为 right。
  • 设置宽度:左右两栏宽度设为 200px;中间区域使margin 属性预留左右两栏的宽度,并使中间区域宽度自适应,将 margin 设为 0 200px。
/* 公共样式代码 */
body,
html {
  padding: 0;
  margin: 0;
}
div {
  height: 500px;
}
/* float + margin方案核心代码 */
.left,
.right {
  width: 200px;
  background: pink;
}
.left {
  float: left;
}
.main {
  margin: 0 200px;
  background: lightblue;
}
.right {
  float: right;
}

1.5 浮动布局的扩展

**扩展:**左右两栏宽度 200px,中间自适应,并且要求先加载中间后加载左右。

由于扩展题对flex 布局grid 布局定位布局三种方案影响不大,只需进行简单的改动。

所以扩展题只介绍了浮动布局,该类解决方案平时开发根本不会使用,读者凭兴趣看看即可。

html 代码:

<div class="container">
  <div class="main-container">
    <div class="main">中间自适应区域</div>
  </div>
  <div class="left">左侧固定区域</div>
  <div class="right">右侧固定区域</div>
</div>
/* 公共样式代码 */
body,
html {
  padding: 0;
  margin: 0;
}
div {
  height: 500px;
}
/* float + margin方案核心代码 */
.container > div {
  float: left;
}
.left,
.right {
  width: 200px;
  background: pink;
}
.main-container {
  width: 100%; /*撑满container容器的宽度*/
}
.main {
  margin: 0 200px; /*预留给左右区域的宽度*/
  background: lightblue;
}
.left {
  margin-left: -100%; /*百分比是相对于container容器的宽度*/
}
.right {
  margin-left: -200px;
}

结语

这是我目前所了解的知识面中最好的解答,当然也有可能存在一定的误区。

所以如果对本文存在疑惑,可以在评论区留言,我会及时回复的,欢迎大家指出文中的错误观点。

最后码字不易,觉得有帮助的朋友点赞、收藏、关注走一波。