三栏布局的5种实现方案

三栏布局在我们做项目时经常碰见的案例，如下描述：假设高度已知，请写出三栏布局，其中左栏和右栏宽度都为270px,中间自适应（如下图）

针对这种需求，下边给出五种解决方案：

1. 浮动
2. 绝对定位
3. flexbox布局
4. 表格布局
5. 网格布局

1. 使用浮动方法实现

HTML代码：

    <section class="layout float">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            <span>flaot方法实现三列布局</span>
        </div>
    </section>

CSS代码：

        .layout.float div{
            height: 100px;
        }
        .layout.float .left {
            float: left;
            width: 270px;
            background: blue;
        }

        .layout.float .right {
            float: right;
            width: 270px;
            background: blue;
        }

        .layout.float .center {
            background: yellow;
            text-align: center;
        }

效果图：