三欄佈局 五中解決方式

LZDROID發表於2019-02-21

前言

有些事情總是要面對的，那我就拿這一篇開始我的記錄生涯吧

正文

三欄佈局

經典的上中下，左中右，三欄，兩欄都屬於這類問題，下面我們看看這如何實現（其中，面試官如果讓你寫程式碼，你的HTML結構可以使用語義化標籤）

樣式
<style>
    *{
        padding: 0;
        margin: 0;
    }
    section{
        margin-top: 10px;
    }
    section article>div{
        min-height: 100px;
    }
</style>
複製程式碼
<section class="float">
    <style>
        .float .left{
            float: left;
            width: 300px;
            background: red;
        }
        .float .right{
            float: right;
            width: 300px;
            background: green;
        }
        .float .center{
            background: yellow;
        }
    </style>
    <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
            <h1>float佈局</h1>
        </div>
    </article>
</section>
複製程式碼
<section class="position">
    <style>
        .position .left{
            position: absolute;
            left: 0;
            width: 300px;
            background: red;
        }
        .position .right{
            position: absolute;
            right: 0;
            width: 300px;
            background: green;
        }
        .position .center{
            position: absolute;
            left: 300px;
            right: 300px;
            background: yellow;
        }
    </style>
    <article class="left-right-center">
        <div class="left"></div>
        <div class="center">
            <h1>position佈局</h1>
        </div>
        <div class="right"></div>
    </article>
</section>
複製程式碼
 <section class="flex">
    <style>
        .flex{
            //上邊的position佈局脫離了文件流
            margin-top: 120px;
        }
        .flex .left-right-center{
            display: flex;
        }
        .flex .left{
            width: 300px;
            background: red;
        }
        .flex .right{
            width: 300px;
            background: green;
        }
        .flex .center{
            flex: 1;
            background: yellow;
        }
    </style>
    <article class="left-right-center">
        <div class="left"></div>
        <div class="center">
            <h1>flex佈局</h1>
        </div>
        <div class="right"></div>
    </article>
</section>
複製程式碼
<section class="table">
    <style>
        .table .left-right-center{
            display: table;
            height: 100px;
            width: 100%;
        }
        .table .left-right-center>div{
            display: table-cell;
        }
        .table .left{
            width: 300px;
            background: red;
        }
        .table .right{
            width: 300px;
            background: green;
        }
        .table .center{
            background: yellow;
        }
    </style>
    <article class="left-right-center">
        <div class="left"></div>
        <div class="center">
            <h1>table佈局</h1>
        </div>
        <div class="right"></div>
    </article>
</section>
複製程式碼
<section class="grid">
    <style>
        .grid .left-right-center{
            display: grid;
            width: 100%;
            grid-template-rows: 100px;
            grid-template-columns: 300px auto 300px;
        }
        .grid .left{
            background: red;
        }
        .grid .right{
            background: green;
        }
        .grid .center{
            background: yellow;
        }
    </style>
    <article class="left-right-center">
        <div class="left"></div>
        <div class="center">
            <h1>grid佈局</h1>
        </div>
        <div class="right"></div>
    </article>
</section>
複製程式碼

看完程式碼，下來就介紹一下優缺點

  • float 相容性好，但是需要清除浮動，且脫離文件流了
  • position 跟float一樣
  • flex 解決了脫離文件流的問題，相容稍微有些差
  • table 相容性好，但現在不推薦使用了，
  • grid 下一代標準，程式碼量少，實現簡單

那麼去掉高度後該如何選擇了，其中flex和table表現良好，grid需要調整，但是剩下的就不能使用了。 面向未來程式設計，所以，樓主也在學習flex和grid，簡單強大

相關文章