4种方法实现边栏固定中间自适应的3栏布局

设计一个页面，经常会遇到3栏布局，包括左右边栏和中间主题内容，一般情况下都是边栏固定，中间自适应，常用的方法主要有4种：自身浮动、绝对定位，margin负值和flex布局，今天主要一起看一看这种布局的实现，首先来看一看效果：

See the Pen QwRzqL by superlin (@superlin) on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

基础样式我就不说明了，可以看源码，这里只看重要代码。

自身浮动

先看html代码，结果比较简单：

html<div class="self-float">
  <div class="left"></div>
  <div class="right"></div>
  <div class="main"></div>
</div>

这种方法比较简单，左右定宽度分别进行左浮动和右浮动，此时主内容列主会自动插入到左右两列的中间，设定左右margin为两边边栏的宽度即可：

css.self-float .left{
  float: left;
}
.self-float .right{
  float: right;
}
.self-float .main{
  margin: 0 100px;
}

绝对定位

html代码结构和前一种方法类似：

html<div class="absolute-pos">
  <div class="left"></div>
  <div class="right"></div>
  <div class="main"></div>
</div>

这种方法比较直观，容易理解：左右两栏采用绝对定位，固定于页面的左右两侧，主内容列用左右margin值撑开距离。

css.absolute-pos {
  position: relative;
}
.absolute-pos .left{
  position: absolute;
  left: 0;
  top: 0;
}
.absolute-pos .right{
  position: absolute;
  right: 0;
  top: 0;
}
.absolute-pos .main{
  margin: 0 100px;
}

margin负值

这种方法就稍微复杂了一些了，使用的是负的margin值，而且html标签也增加了，中间的主体要使用双层标签，先看代码。

html<div class="margin-negative">
  <div class="main">
    <div class="content"></div>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</div>

外层div宽度100%显示，并且浮动，内层div为真正的主体内容，含有左右100像素的margin值。左栏与右栏都是采用margin负值定位的，左栏左浮动，margin-left为-100%，正好使左栏div定位到了页面的左侧；右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即100px，这样正好填补了右边。

css.margin-negative .main{
  width: 100%;
  float: left;
}
.margin-negative .main .content {
  margin: 0 100px;
}
.margin-negative .left {
  float: left;
  margin-left: -100%;
}
.margin-negative .right {
  float: left;
  margin-left: -100px;
}

flex布局

结果依然后前两种相似，代码如下。

html<div class="flex-container">
  <div class="left"></div>
  <div class="main"></div>
  <div class="right"></div>
</div>

这种实现特别简单，外层div被设定为伸缩布局，内层左右边栏宽度固定位100像素，而中间内容区main空间分配比例为1，即将剩余空间按1:1全部分配给main，这样才实现了中间的宽度的自适应。

css.flex-container{
  display: -webkit-flex;
  display: flex;
}
.flex-container .main{
  -webkit-flex: 1;
  flex: 1;
}

---

如果你还有好的方法，请一定给我留言哦

欢迎光临小弟博客：Superlin's Blog
我的博客原文：4种方法实现边栏固定中间自适应的3栏布局