五種方法實現三欄佈局

時間 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要複雜一些。有興趣的話能夠本身去查閱一下具體用法。佈局

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。