css实现双飞翼布局，三列布局，中间宽度自适应，两边定宽--五种方案对比延伸

标题css实现双飞翼布局，三列布局，中间宽度自适应，两边定宽；假设高度固定300px;

html

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

css
(1)、浮动布局（float）

	.container {
      width: 100%;
      height: 300px;
    }
    .container > div {
        float: left;
    }
    .left, .right {
        width: 60px;
        height: 100%;
    }
    .left {
        background-color:red;
    }
    .right {
        background-color:blue;
    }
    .main {
        height: 100%;
        width:calc(100% - 120px);
        background-color:green;
    }

(2)、绝对布局（absolute）

		 .container{
            width:100%;
            height:300px;
            position:relative;
         }