12bet,设计一个页面，经常会遇到3栏布局，包括左右边栏和中间主题内容，一般情况下都是边栏固定，中间自适应，12bet,常用的方法主要有4种：自身浮动、绝对定位，margin负值和flex布局，今天主要一起看一看这种布局的实现，首先来看一看效果：
See the Pen QwRzqL by superlin (@superlin) on CodePen.
基础样式我就不说明了，12bet,可以看源码，这里只看重要代码。
自身浮动
先看html代码，结构比较简单：
<div class="self-float">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
12bet,这种方法比较简单，左右定宽度分别进行左浮动和右浮动，12博体育,此时主内容列主会自动插入到左右两列的中间，设定左右margin为两边边栏的宽度即可：
.self-float .left{
float: left;
}
.self-float .right{
float: right;
}
.self-float .main{
margin: 0 100px;
}
绝对定位
html代码结构和前一种方法类似：
<div class="absolute-pos">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
这种方法比较直观，容易理解：左右两栏采用绝对定位，12博体育,固定于页面的左右两侧，主内容列用左右margin值撑开距离。
.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标签也增加了，中间的主体要使用双层标签，先看代码。
<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，这样正好填补了右边。
.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布局
结构依然后前两种相似，代码如下。
<div class="flex-container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
这种实现特别简单，外层div被设定为伸缩布局，内层左右边栏宽度固定位100像素，而中间内容区main空间分配比例为1，即将剩余空间按1:1全部分配给main，这样才实现了中间的宽度的自适应。
.flex-container{
display: -webkit-flex;
display: flex;
}
.flex-container .main{
-webkit-flex: 1;
flex: 1;
}
如果你还有好的方法，请一定给我留言哦
