双飞翼布局

by 亮 薛

HTML

双飞翼布局
    <div class="header">header</div>
    <div class="wrapper clearfix">
        <div class="main col">
            <div class="main-wrap">
                main
            </div>
        </div>
        <div class="left col">
            left
        </div>
        <div class="right col">
            right
        </div>
    </div>
    <div class="footer">footer</div>

CSS

.wrapper {color:#fff;}
.col {float: left;}
.header {height: 50px;background-color: #666;color:#fff;}
.main {width: 100%;background-color: #555;}
.main-wrap {margin: 0 100px 0 100px;height: 200px;}
.left {width: 100px;height: 200px;margin-left: -100%;background-color: #999;}
.right {width: 100px;height: 200px;margin-left: -100px;background-color: #999;}
.footer {height: 50px;background-color: #666;color:#fff;}
.clearfix::after{content: "";display:block;clear:both;visibility:hidden;height:0;overflow:hidden;}