五种方法实现三栏布局

时间 2019-11-08

标签五种方法实现布局繁體版

原文原文链接

题目：用五种方式实现三栏布局。高度已知，左右两边宽度300px。中间自适应。
看到这个题目，咱们首先会想起2-3种解决办法。今天咱们就来挖一挖到底有多少种方法实现三栏布局。
如下代码能够直接复制运行html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏布局</title>
    <style>
        html * {
            margin: 0;
            padding: 0;
        }
        /*这里写一些公共的样式*/
        .layout{
            margin-bottom: 10px;
            width: 100%;
        }
        .layout>div{
            min-height: 100px;
        }
        .layout>.left{
            background-color: red;
            width: 300px;
        }
        .layout>.center{
            background-color: black;
        }
        .layout>.right{
            background-color: blue;
            width: 300px;
        }
    </style>
</head>
<body>
<!--1.float布局-->
<style>
    .float .left{
        float: left;
    }
    .float .right{
        float: right;
    }
</style>
<section class="layout float">
    <div class="left"></div>
    <!--注意：这里要把right写在center以前-->
    <div class="right"></div>
    <div class="center"></div>
</section>
<!--2.absolute布局-->
<style>
    .absolute{
        height: 100px;
    }
    .absolute>div{
        position: absolute;
    }
    .absolute .left{
        left: 0;
    }
    .absolute .center{
        left: 300px;
        right: 300px;
    }
    .absolute .right{
        right: 0;
    }
</style>
<section class="layout absolute">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</section>
<!--3.flex布局-->
<style>
    .flex{
        display: flex;
    }
    .flex .center{
       flex: 1;
    }
</style>
<section class="layout flex">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</section>
<!--4.table布局-->
<style>
    .table{
        display: table;
        height: 100px;
    }
    .table>div{
        display: table-cell;
    }
</style>
<!--表格布局把每一个div当成一个表格，因此同一行的表格高度始终是相等的-->
<section class="layout table">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</section>
<!--5.grid布局-->
<style>
    .grid{
        display: grid;
        grid-template-columns: 300px auto 300px;
    }
</style>
<section class="layout grid">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</section>
</body>
</html>

这里前三种是咱们常常用到的布局方式，后两种不经常使用。table布局虽然不被推荐使用，可是有些时候仍是很好用的。grid布局就是把容器分红几行几列的格子，和flex布局相似，但比flex要复杂一些。有兴趣的话能够本身去查阅一下具体用法。布局