CSS-三列布局【Collection】

如何在兼容所有浏览器的前提下，实现一个不定宽度的容器被分为左中右三列，左右两列定宽100px，中间列自适应剩余宽度，且三列之间间距为10px，效果如下：

三列布局.png

对于这类型的布局，网上有很多有名的方案：圣杯布局^[1]和双飞翼布局^[2]。

实现

不过我有自己实现的方式，只需要float和margin即可，方案如下：
CSS初步设置：

    /*CSS Reset*/
    .container {height:50px; color: #fff;}
    .container *{margin:0;padding:0;}
    .container div {height: 100%;}
    /*初始设置*/
    .left, .right{width: 100px;}
    .left{background-color: #f33;}
    .right{background-color: #3aa;}
    .center{background-color: #e3c;}

HTML结构：

    

        

            
左侧定宽
        
        

            
右侧定宽
        
        
        

            
中间自适应
        
    

实现多列布局的CSS部分：

    /*方案实现*/
    .left {float:left;}
    .right {float:right;}
    .center {margin: 0 110px;}

这个布局只要注意把不浮动的居中部分的HTML元素.center放在另外两个浮动的元素.left .right的文档结构的后面即可。
这样实现的原理在于，浮动元素会对不浮动的非父级元素是外框相容，而里面的内容相斥的特原理。
所以在文档中前面两个浮动元素会“吃掉”紧接着的.center的部分“边框”（包括padding border margin），为了防止需要展现的内容被“吃掉”，只需要给中间的内容设置一个margin: 0 110px;（已将三列的间距计算在内）即可。
当然也可以将.center设置padding: 0 110px;，这时候设置背景色的就是.center的子元素了。
另外，上面HTML结构的.left .right .center的子元素框

...

也不一定需要。

bonus

附上其他同学的使用圣杯布局实现的方式：

    body,div{ margin: 0; padding: 0; }
    .main_content,.left,.right{height: 200px;}
    .main_content{background-color: #cf6;}
    .left{background-color: #6cf;width: 100px;}
    .right{background-color: #fc6;width: 100px;}
    .main{ width: 100%; float: left; }
    .main_content{ margin: 0 110px; }
    .left{ margin-left: -100%; float: left; }
    .right{ margin-left: -100px; float: left; }

    

        
Main
    
    
Left
    
Right

根据网上的文章，这段代码并非那么“正统”，而且圣杯布局因兼容性考虑需要给body设置最小宽度min-width。

-----割-----
今天，哦，应该是昨天了，看其他同学引用的其他同学的代码，看不懂啊，然后一步一步注释看效果，最后的收获就加深了对position:relative、position:absolute、float、margin的理解：设置relative的元素可以使用位移属性（top right bottom left以前也知道但是没怎么用不熟练）；margin和位移属性可以同时/叠加使用；通过容器设置float以及子元素设置absolute使得容器高度为0（未设置固定高度，默认为auto），可以让容器后面的元素“上移”到子元素同行而不会被“往下推”。
不废话上代码：

/*CSS Reset*/
.container *{margin:0;padding:0;}
/*初始设置*/
.left, .right{width: 100px;}
.left{background-color: #f33;}
.right{background-color: #3aa;}
.center{background-color: #e3c;}

    
左侧定宽
    

        
中间自适应
    
    
右侧定宽

.left{
    position: relative;/*主要提升层级，是防止被.center-flex覆盖了，但实际上并不需要*/
    float:left;
}
.right{
    float:right;/* #5 由于.center-fix高度为0，所以会被排到跟其他两列一行中 */
}
.center-fix{
    float: left;/* #1 浮动跟随.left */
    margin-left:-100px;/* #3 将.center-fix的宽延伸到.left区域 */
    width: 100%;/* #4 拉满屏幕宽度 */
    position: relative;/* #5 作为.center绝对定位的参照物，可以不设置 */
}
.center{
    margin-left:100px;/* #2 相对.center设置margin-left */
    position: absolute;/* #5 .center-fix高度为0，隐藏 */
    right: 110px;/* #6 拉伸到右边，距离包含了.right的宽度和与.right的间距，设为0会遮盖.right */
    left: 10px;/* #7 拉伸到左边，距离只包含了与.left的间距，由于#2设置了margin-left，所以不会覆盖.left，而是left和margin-left同时起作用。 */
}

以上
欢迎交流。

---

1. 圣杯布局 ↩

2. 双飞翼布局 ↩