双飞翼布局

双飞翼布局

---

双飞翼布局： 同圣杯布局一样，要求三栏布局，中间宽度自适应，两边定宽，允许任意列高度最高。这样做的优势是重要的东西放在文本流前面可以优先渲染。
body部分如下

			<div class="middle">
               <div class="innerbox">//注意这里
                    <h4>我是middle</h4>
                <p>我是内容部分按道理来说我应该特别长长长长长长长长长长长长长长长长长长长长长长长长长长长长来证明我没有被我的左右兄弟遮挡</p>
               </div>
            </div>
        	<div class="left">
                    <h4>我是left</h4>
                    <p>我是left的内容</p>
                </div>
                <div class="right">
                    <h4>我是right的内容</h4>
                    <p>我是right的内容</p>
                </div>

    *{
			margin:0;
			padding:0;
		}
    header{
        height:40px;
        background-color: #b5c4b1;
        line-height:40px;
        text-align: center;		
        clear: both;	
            }
    div{
        text-align: center;
            }
    .middle,.left,.right{
                min-height: 300px;
            }
    .middle{
        width:100%;   
        background:#f8ebd8;
            }
    .left{
        width:200px;
        background: #ead0d1;
            }
    .right{
        width:200px;
        background:#9ca8b8;
            }

得到如下页面

给左右边栏添加浮动并让左右边栏去中间栏的两边。看似没毛病实际上此时中间栏的内容还是会被两边遮挡，只要稍加拖动就能看得出来，这时我们就应该操作一下中间栏的内容框了

/* 给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/ 
.innerbox{
    margin:0 200px 0 200px;
    height:100px;
}

现在就可以随意拖动了

完整代码：https://github.com/yutingbai/html-css-js/blob/master/布局/双飞翼.html