三欄佈局的幾種方式

時間 2019-12-11

標籤佈局幾種方式简体版

原文原文鏈接

1.流體佈局html

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    /*左右浮動，中間margin或者overflow*/
    /*缺點就是主要內容沒法最早加載，當頁面內容較多時會影響用戶體驗。*/
    .left {
        float: left;
        height: 200px;
        width: 100px;
        background-color: red;
    }
    .right {
        width: 200px;
        height: 200px;
        background-color: blue;
        float: right;
    }
    .main {
        margin-left: 100px;
        margin-right: 200px;
        /*或者overflow: hidden;或者auto*/
        height: 200px;
        background-color: green;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>
</body>
</html>

2.聖盃佈局瀏覽器

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        /*要點：父元素設置margin左右，main寬度100%，而後left和right都設置margin-left左移到同一排*/
        .container {
            margin-left: 100px;
            margin-right: 200px;
        }
        .main {
            float: left;
            width: 100%;
            height: 300px;
            background-color: red;
        }
        .left {
            float: left;
            width: 100px;
            height: 300px;
            margin-left: -100%;/*左移100%,使left和main在同一行*/
            position: relative;
            left: -100px;/*左移100px，與container的margin-left相對應。使元素響應地靠左排列*/
            background-color: blue;
        }
        .right {
            float: left;
            width: 200px;
            height: 300px;
            margin-left: -200px;/*左移自身寬度，使right和main在同一行*/
            position: relative;
            right: -200px;/*右移200px，與container的margin-right相對應。使元素響應地靠右排列*/
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="main"></div><!--先寫主體內容，優先渲染-->
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

3.雙飛翼佈局佈局

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        /*要點：所有都浮動，而後margin-left位移到同一排*/
        .content {
            float: left;
            width: 100%;
        }
        .main {
            height: 200px;
            margin-left: 100px;
            margin-right: 200px;
            background-color: green;
        }
        .left {
            float: left;
            height: 200px;
            width: 100px;
            margin-left: -100%; 
            background-color: red;
        }
        .right {
            width: 200px;
            height: 200px;
            float: right;
            margin-left: -200px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="main"></div><!--先寫主體內容，優先渲染-->
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>

</html>

4.flex佈局flex

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        /*缺點：新技術要考慮瀏覽器兼容*/
        .container {
            display: flex;
        }
        .main {
            flex: 1;
            height: 300px;
            background-color: red;
        }
        .left {
            order: -1;/*排最左*/
            flex-basis: 200px;/*分配空間*/
            height: 300px;
            background-color: blue;
        }
        .right {
            flex-basis: 100px;
            height: 300px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

5.絕對定位佈局spa

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    .container {
        position: relative;
    }
    .main {
        height: 300px;
        margin: 0 100px;
        background-color: green;
    }
    .left {
        position: absolute;
        width: 100px;
        height: 300px;
        left: 0;
        top: 0;
        background-color: red;
    }
    .right {
        position: absolute;
        width: 100px;
        height: 300px;
        background-color: blue;
        right: 0;
        top: 0;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

6.table佈局htm

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        /*缺點：沒法設置欄間距，也沒法優先加載內容*/
        .container {
            display: table;
            width: 100%;
        }
        .left,
        .main,
        .right {
            display: table-cell;
        }
        .left {
            width: 200px;
            height: 300px;
            background-color: red;
        }
        .main {
            background-color: blue;
        }
        .right {
            width: 100px;
            height: 300px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>

</html>

相關標籤/搜索

每日一句

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