总结css实现固定和自适应宽度混合的多栏布局实现方法

总结css实现固定和自适应宽度混合的多栏布局实现方法

关于固定宽度和自适应宽度混合的多栏布局十分常见，比如一个博客页面左边的目录块是固定宽度，右边文章显示块是随浏览器窗口大小自动调整宽度。下面列举几种个人总结的实现方法，如何做到中间自适应宽度，两边固定宽度的三栏布局：

一、用float+正margin

html部分：

<div class="left" >left</div>
<div class="right">right</div>
<div class="main" >main</div>

注意在html代码中浮动的左右块应该写在中间块的上面，否则三个块不能水平排列

css部分：

.left, .right {
    float: left;
    width: 220px;
    height: 200px;
    background: blue;
}        
.right{
    float: right;
}        
.main {
    margin: 0 230px;
    background: red;
    height: 200px;
}

二、float+负margin

负margin是一个很强大的东西，此处左边块用到了margin-left:-100%;float:left ，是它从原本位于中间块的下面瞬间浮动到了中间块的最左边与之水平并且覆盖。这里的布局思想是，将三个块均设置float：left；中间块的设置width:100%，以达到宽度自适应的目的，但此时左右两块会溢出换行，所以要使用负margin来解决，同时，要在中间块中再嵌套一个块作为用来放入内容，还要设置左右margin，以免内容被左右的块覆盖。

html部分：

<div class="main" >
    <div class="inner">
        main
    </div>
</div>
<div class="left" >left</div>
<div class="right">right</div>

css部分：

.left, .right {
    float: left;
    width: 220px;
    height: 200px;
    background: blue;
    margin-left:-220px;
}       
.left{
    margin-left: -100%;
}      
.main {
    float: left;
    width: 100%;
}
.inner{
    margin:0 230px;
    height: 200px;
    background-color: red;
}

三、position定位

将左右两块的position属性设为absolute，同时使用top，left，right进行定位，然后对中间块设置左右margin即可。

html部分：

<div class="left" >left</div>
<div class="main">main</div>
<div class="right">right</div>

css 部分：

.left,.right {
    width: 220px;
    height: 200px;
    background: blue;   
}       
.left{
    position: absolute;
    top: 0;
    left: 0;
}
.right{
    position: absolute;
    top: 0;
    right: 0;
}       
.main {
    margin:0 230px;
    height: 200px;
    background: red;
}

四、css3伸缩盒模型

这是css3的一个新属性，使多栏布局变得十分容易，但是有些浏览器还不支持。

html部分：

<div class="container">
    <div class="left" >left</div>
    <div class="main">main</div>
    <div class="right">right</div>
</div>

css部分：

.container{
    display:-webkit-box;
    display:-moz-box;
    display:-ms-box
}
.left,.right {
    -webkit-box-flex:0;
    -moz-box-flex:0;
    -ms-box-flex:0;
    width: 220px;
    height: 200px;
    background: blue;   
}        
.main {
    -webkit-box-flex:1;
    -moz-box-flex:1;
    -ms-box-flex:1;
    margin:0 10px;
    height: 200px;
    background: red;
}