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

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;
}

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

参考

Author image
关于 superlin
Beijing, CN 主页
The reason why a great man is great is that he resolves to be a great man.
默认颜色 边栏居左 边栏居右