页面布局（三栏布局）

题目： 假设高度已知，左右宽度各位300px,中间自适应

　　方案一： 浮动解决方案

　　　 优点：浏览器兼容性比较好

　　　　缺点：需要清除浮动（脱离了文档流）

　　　　代码如下：

<style>
    html *{
        padding: 0;
        margin: 0;
    }
    .layout>div{
        min-height: 100px;
    }
    .left{
        float: left;
        width: 300px;
        background-color: red;
    }
    .right{
        float: right;
        width: 300px;
        background-color: green;
    }
    .center{
        min-height: 100px;
        margin: 0 300px;
        background-color: yellow;
    }
</style>
<!--浮动布局-->
<section class="layout">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">
        <h2>float布局方案</h2>
        1.float布局 中间内容
        2.float布局 中间内容
    </div>
</section>

　　方案二： 绝对定位解决方案

 

　　　　优点：浏览器兼容性好

 

　　　　缺点：脱离了文档流，可使用性差

 

　　代码如下：

<style>
    html *{
        padding: 0;
        margin: 0;
    }
    .layout>div{
        position: absolute;
        min-height: 100px;
    }
    .left{
        left: 0;
        width: 300px;
        background-color: red;
    }
    .right{
        right: 0;
        width: 300px;
        background-color: green;
    }
    .center{
       left: 300px;
        right: 300px;
        background-color: yellow;
    }
</style>
<!--绝对定位布局-->
<section class="layout">
    <div class="left"></div>
    <div class="center">
        <h2>绝对定位解决方案</h2>
        1.绝对定位布局 中间内容
        2.绝对定位布局 中间内容
    </div>
    <div class="right"></div>
</section>

　　方案三：flexbox解决方案（优先选择的方案）

 

　　　　优点：css3 为了解决上面两种方案的不足出现的，移动端都用flex布局

　　　　缺点：一些浏览器还不支持

 

　　代码如下：

<style>
    html *{
        padding: 0;
        margin: 0;
    }
    .layout{
        display: -webkit-flex;
        display: flex;
    }
    .layout>div{
        min-height: 100px;
    }
    .left{
        width: 300px;
        background-color: red;
    }
    .right{
        width: 300px;
        background-color: green;
    }
    .center{
        -webkit-flex:1;
        flex: 1;
        background-color: yellow;
    }
</style>
<!--flexbox布局-->
<section class="layout">
    <div class="left"></div>
    <div class="center">
        <h2>flexbox解决方案</h2>
        1.flexbox布局 中间内容
        2.flexbox布局 中间内容
    </div>
    <div class="right"></div>
</section>

　　方案四：表格布局方案

　　　　优点： 浏览器的兼容性比较好

　　　　 代码如下：

<style>
    html *{
        padding: 0;
        margin: 0;
    }
    .layout{
        display:table;
        width: 100%;
        min-height: 100px;
    }
    .layout>div{
        display: table-cell;
    }
    .left{
        width: 300px;
        background-color: red;
    }
    .right{
        width: 300px;
        background-color: green;
    }
    .center{
        background-color: yellow;
    }
</style>
<!--表格布局-->
<section class="layout">
    <div class="left"></div>
    <div class="center">
        <h2>table解决方案</h2>
        1.表格布局 中间内容
        2.表格布局 中间内容
    </div>
    <div class="right"></div>
</section>

　　方案五：网格布局（grid）

　　　　优点：网格布局是新出的属性，是一个新的技术。可以通过很简单的代码就可实现复杂的布局

　　　　缺点：只有一些主浏览器支持

　　　　代码如下：

<style>
    html *{
        padding: 0;
        margin: 0;
    }
    .layout{
        display:grid;
        grid-template-columns: 300px auto 300px;
    }
    .layout>div{
        min-height: 100px;
    }
    .left{
        background-color: red;
    }
    .right{
        background-color: green;
    }
    .center{
        background-color: yellow;
    }
</style>
<!--网格布局-->
<section class="layout">
    <div class="left"></div>
    <div class="center">
        <h2>网格布局解决方案</h2>
        1.网格布局 中间内容
        2.网格布局 中间内容
    </div>
    <div class="right"></div>
</section>

这个题目中的高度是已知的，如果高度不固定，随着内容的增多而增加时。前两个方案就不可以了。后三个方案仍是可以的