三栏布局之圣杯布局 

<body>
    <div class="container">
        <div class="center fl"></div>
        <div class="left fl"></div>
        <div class="right fl"></div>
    </div>
</body>
<style>
*{
    margin: 0;
    padding:0;
}
.fl{
    float: left;
}
.container{
    padding:0 200px;
    height: 200px;
}
.center{
    background: gray;
    width:100%;
    min-height: 200px;
}
.left,.right{
    width:200px;
    min-height: 200px;
}
.left{
    margin-left:-100%;
    background: red;
    position: relative;
    right: 200px;
}
.right{
    background: green;
    margin-right: -200px;
}
</style>

　　

posted @ 2019-09-16 19:37  燃烧小火苗  阅读(228)  评论(0)  编辑  收藏  举报