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

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

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

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

自身浮动

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

html

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

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


绝对定位

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

html

这种方法比较直观，容易理解：左右两栏采用绝对定位，固定于页面的左右两侧，主内容列用左右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宽度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被设定为伸缩布局，内层左右边栏宽度固定位100像素，而中间内容区main空间分配比例为1，即将剩余空间按1:1全部分配给main，这样才实现了中间的宽度的自适应。

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


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

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