圣杯布局（三栏布局）

时间：2017-07-24 21:31:45 阅读：175 评论：0 收藏：0 [点我收藏+]

标签：contain nav str oat http ati ddl css strong

圣杯布局也就是：左右固定宽度，中间自适应的布局样式

HTML布局：

注意：一定是中间部分写在最上面

<header><h4>header内容</h4></header>
<div class="container">
    <div class="middle"><h4>中间弹性</h4></div>
    <div class="left"><h4>左边栏</h4></div>
    <div class="right"><h4>右边栏</h4></div>
</div>
<footer><h4>内容区</h4></footer>

css样式：

.container{
            height: 200px;
            overflow: hidden;
        }
        .middle{
            width: 100%;
            height: 200px;
            background: mediumaquamarine;
            float: left;
        }
        .left{
            width: 200px;
            height: 200px;
            background: navajowhite;
            float: left;
        }
        .right{
            width: 200px;
            height: 200px;
            background: lightblue;
            float: left;
        }