10. 左右宽度固定300px，中间自适应，5种布局方案

1、浮动解决方案

<section class="layout float">
    <style>
        .layout.float .left{
            float: left;
            width: 300px;
            background: red;
        }
        .layout.float .right{
            float: right;
            width: 300px;
            background: blue;
        }
        .layout.float .center{
            background: yellow;
        }
    </style>
    <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            <h1>浮动解决方案</h1>
            1.这是三栏布局中间部分
            2.这是三栏布局中间部分
        </div>
    </article>
</section>

2、 绝对定位absolute解决方案

<section class="layout absolute">
    <style>
        .layout.absolute .left-right-center > div{
            position: absolute;
        }
        .layout.absolute .left{
            left: 0;
            width: 300px;
            background: red;
        }
        .layout.absolute .center{
            left: 300px;
            right: 300px;
            background: yellow;
        }
        .layout.absolute .right{
            right: 0;
            width: 300px;
            background: blue;
        }
    </style>
    <article class="left-right-center">
        <div class="left"></div>
        <div class="center">
            <h1>绝对定位解决方案</h1>
            1.这是三栏布局绝对定位中间部分
            2.这是三栏布局绝对定位中间部分
        </div>
        <div class="right"></div>
    </article>
</section>

3、