多欄佈局

時間 2019-11-17

標籤佈局简体版

原文原文鏈接

水平方向－三欄佈局

1.浮動佈局

簡介：左邊固定寬度後左浮動，右邊固定寬度後右浮動css

.float .left{
    float: left;
    width: 200px;
    background-color: yellow;
}
.float .right{
     float: right;
     width: 200px;
     background-color: green;
}
.float .center{
     background-color: pink;
}

<section class="float">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="center">
            這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局
            這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局
            這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局
            這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局
        </div>
</section>

可是，這種佈局方式有個缺點：當中間的內容不少時，將會出現「字圍」效果，以下圖所示html

解決辦法：建立一個BFC來解決上面的問題。衆所周知建立BFC的條件有：chrome

1）float的值不爲none；瀏覽器

2）overflow的值不爲visible；ide

3）display的值爲inline-block、table-cell、table-caption；佈局

4）position的值不是static或relative；flex

此處我選擇給.center增長一行代碼overflow:auto;看下面的代碼及效果圖：ui

.float .left{
      float: left;
      width: 200px;
      background-color: yellow;
}
.float .right{
      float: right;
      width: 200px;
      background-color: green;
}
.float .center{
      background-color: pink;
      overflow: auto;/*建立BFC*/
}

浮動佈局的優缺點：浮動佈局兼容性好，可是當中間內容有不少時，左右兩邊的高度不會隨着中間內容的高度增高而增高。spa

另外，利用浮動的三欄佈局著名的有「聖盃佈局」、「雙飛翼佈局」，我的認爲它們仍然屬於浮動這一分類，如下爲兩種佈局的代碼3d

a.聖盃佈局

1.將三者都 float:left , 再加上一個position:relative (由於相對定位後面會用到）；

2.middle部分 width:100%佔滿；

3.此時middle佔滿了，因此要把left拉到最左邊，使用margin-left:-100%；

4.這時left拉回來了，但會覆蓋middle內容的左端，要把middle內容拉出來，因此在外圍container加上 padding:0 220px 0 200px；

5.middle內容拉回來了，但left也跟着過來了，因此要還原，就對left使用相對定位 left:-200px 同理，right也要相對定位還原 right:-220px；

6.到這裏大概就自適應好了。若是想container高度保持一致能夠給left middle right都加上min-height:130px；

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>聖盃佈局</title>
<style type="text/css">
    *{margin: 0;padding: 0;}
    .left,
    .middle,
    .right{ 
        position: relative;
        float: left;
    }
    .container{
        padding:0 220px 0 200px;
        overflow: hidden;
    }
    .left{
        margin-left: -100%;
        left: -200px;
        width: 200px;
        background: yellow;
    }
    .right{
        margin-left: -220px;
        right: -220px;
        width: 220px;
        background: green;
    }
    .middle{ 
        width: 100%;
        background: pink;
        word-break: break-all;

    }
</style>
</head>
<body>
<div class="container">
    <div class="middle">
        這是聖盃佈局這是聖盃佈局這是聖盃佈局這是聖盃佈局這是聖盃佈局這是聖盃佈局這是聖盃佈局
        這是聖盃佈局這是聖盃佈局這是聖盃佈局這是聖盃佈局這是聖盃佈局這是聖盃佈局這是聖盃佈局
        這是聖盃佈局這是聖盃佈局這是聖盃佈局這是聖盃佈局這是聖盃佈局這是聖盃佈局這是聖盃佈局
        這是聖盃佈局這是聖盃佈局這是聖盃佈局這是聖盃佈局這是聖盃佈局這是聖盃佈局這是聖盃佈局
        這是聖盃佈局這是聖盃佈局這是聖盃佈局這是聖盃佈局這是聖盃佈局這是聖盃佈局這是聖盃佈局
        這是聖盃佈局這是聖盃佈局這是聖盃佈局這是聖盃佈局這是聖盃佈局這是聖盃佈局這是聖盃佈局
        這是聖盃佈局這是聖盃佈局這是聖盃佈局這是聖盃佈局這是聖盃佈局這是聖盃佈局這是聖盃佈局
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</body>
</html>

View Code

b.雙飛翼佈局

1.html代碼中，main要放最前邊，left right

2.將main left right 都float:left

3.將main佔滿 width:100%

4.此時main佔滿了，因此要把left拉到最左邊，使用margin-left:-100% 同理 right使用margin-left:-220px

（這時能夠直接繼續上邊聖盃佈局的步驟，也能夠有所改動）

5.main內容被覆蓋了吧，除了使用外圍的padding，還能夠考慮使用margin。

給main增長一個內層div-- main-inner, 而後margin:0 220px 0 200px

6.main正確展現

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>雙飛翼佈局</title>
<style type="text/css">
    *{margin: 0;padding: 0;}
    .left,
    .main,
    .right{ 
        float: left;
    }
    .left{
        margin-left: -100%;
        width: 200px;
        background: yellow;
    }
    .right{
        margin-left: -220px;
        width: 220px;
        background: green;
    }
    .main{ 
        width: 100%;
    }
    .main-inner{ 
        margin-left: 200px;
        margin-right: 220px;
        min-height: 130px;
        background: pink;
        word-break: break-all;
    }
</style>
</head>
<body>
    <div class="main">
        <div class="main-inner">
            這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局
            這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局
            這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局
            這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局
            這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局
            這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局
            這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局這是雙飛翼佈局
        </div> 
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</body>
</html>

View Code

2.定位佈局

簡介：左邊固定寬度後絕對定位到左邊，右邊固定寬度後絕對定位到右邊，中間絕對定位後設置left、right的值爲左右兩邊的寬度。

        .position .left{
            position: absolute;
            left: 0;
            width: 200px;
            background-color: yellow;
        }
        .position .right{
            position: absolute;
            right: 0;
            width: 200px;
            background-color: green;
        }
        .position .center{
            position: absolute;
            left: 200px;
            right: 200px;
            background-color: pink;
        }

優缺點：它仍然和浮動佈局同樣，沒法作到兩邊隨着中間內容的增高而增高，而且浮動佈局使其脫離了標準文檔流，將會影響其後面的元素，後面的元素要脫離文檔流或者設置margin-top值爲它所佔的高度纔可保證佈局不被定位的元素遮擋住。

3.彈性盒子佈局

簡介：父元素設置display:flex，中間元素設置flex:1;左右兩邊設置固定寬度。

        .flex{
            display: flex;
        }
        .flex .left{
            width: 200px;
            background-color: yellow;
        }
        .flex .right{
            width: 200px;
            background-color: green;
        }
        .flex .center{
            flex: 1;
            background-color: pink;
        }

<section class="flex">
        <div class="left">left</div>
        <div class="center">
            這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局
            這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局
            這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局
            這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局
        </div>
        <div class="right">right</div>
</section>

優缺點：兼容性很差，flex爲CSS3新屬性，對IE兼容性很差，對其它瀏覽器注意加上瀏覽器hack，此處省略了。不過，這種佈局解決了中間內容增高時左右兩邊不隨之增高的問題。以下圖所示：

4.表格佈局

簡介：父元素設置display:table;子元素設置display:table-cell;左右兩邊固定寬度。

        .table{
            display: table;
        }
        .table .left,
        .table .right,
        .table .center{
            display: table-cell;
        }
        .table .left{
            width: 200px;
            background-color: yellow;
        }
        .table .right{
            width: 200px;
            background-color: green;
        }
        .table .center{
            background-color: pink;
        }

<section class="table">
        <div class="left">left</div>
        <div class="center">
            這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局
            這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局
            這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局
            這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局
        </div>
        <div class="right">right</div>
</section>

優缺點：兼容性好，但不利於SEO，不過此種佈局任意一個單元格高度增高時，其它的表格將同時增高，須要根據具體業務場景來選擇此種佈局。

5.網格佈局

簡介：父元素設置表格佈局display:grid;grid-template-columns屬性指定網格列的軌道列表，grid-template-rows屬性指定網格行的軌道列表。

        .grid{
            display: grid;
            grid-template-rows: 100px;
            grid-template-columns: 200px auto 200px;
        }
        .grid .left{
            width: 200px;
            background-color: yellow;
        }
        .grid .right{
            width: 200px;
            background-color: green;
        }
        .grid .center{
            background-color: pink;
        }

<section class="grid">
        <div class="left">left</div>
        <div class="center">
            這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局
            這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局
            這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局
            這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局
        </div>
        <div class="right">right</div>
</section>

優缺點：網格佈局是CSS3新屬性，兼容性不太好，不過它左右兩邊可隨中間內容增高而增高。

以上代碼的總代碼在這裏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        section{
            margin-bottom: 30px;
        }
        .float .left{
            float: left;
            width: 200px;
            background-color: yellow;
        }
        .float .right{
            float: right;
            width: 200px;
            background-color: green;
        }
        .float .center{
            background-color: pink;
            overflow: auto;/*建立BFC*/
        }

        .position .left{
            position: absolute;
            left: 0;
            width: 200px;
            background-color: yellow;
        }
        .position .right{
            position: absolute;
            right: 0;
            width: 200px;
            background-color: green;
        }
        .position .center{
            position: absolute;
            left: 200px;
            right: 200px;
            background-color: pink;
        }

        .flex{
            display: flex;
            margin-top: 150px;
        }
        .flex .left{
            width: 200px;
            background-color: yellow;
        }
        .flex .right{
            width: 200px;
            background-color: green;
        }
        .flex .center{
            flex: 1;
            background-color: pink;
        }
        
        .table{
            display: table;
        }
        .table .left,
        .table .right,
        .table .center{
            display: table-cell;
        }
        .table .left{
            width: 200px;
            background-color: yellow;
        }
        .table .right{
            width: 200px;
            background-color: green;
        }
        .table .center{
            background-color: pink;
        }

        .grid{
            display: grid;
            grid-template-rows: 100px;
            grid-template-columns: 200px auto 200px;
        }
        .grid .left{
            width: 200px;
            background-color: yellow;
        }
        .grid .right{
            width: 200px;
            background-color: green;
        }
        .grid .center{
            background-color: pink;
        }
    </style>
</head>
<body>
    <section class="float">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="center">
            這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局
            這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局
            這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局
            這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局這是浮動佈局
        </div>
    </section>
    <section class="position">
        <div class="left">left</div>
        <div class="center">
            這是定位佈局這是定位佈局這是定位佈局這是定位佈局這是定位佈局這是定位佈局這是定位佈局這是定位佈局
            這是定位佈局這是定位佈局這是定位佈局這是定位佈局這是定位佈局這是定位佈局這是定位佈局這是定位佈局
            這是定位佈局這是定位佈局這是定位佈局這是定位佈局這是定位佈局這是定位佈局這是定位佈局這是定位佈局
            這是定位佈局這是定位佈局這是定位佈局這是定位佈局這是定位佈局這是定位佈局這是定位佈局這是定位佈局 
        </div>
        <div class="right">right</div>
    </section>
    <section class="flex">
        <div class="left">left</div>
        <div class="center">
            這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局
            這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局
            這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局
            這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局這是彈性盒子佈局
        </div>
        <div class="right">right</div>
    </section>
    <section class="table">
        <div class="left">left</div>
        <div class="center">
            這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局
            這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局
            這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局
            這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局這是表格佈局
        </div>
        <div class="right">right</div>
    </section>
    <section class="grid">
        <div class="left">left</div>
        <div class="center">
            這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局
            這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局
            這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局
            這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局這是網格佈局
        </div>
        <div class="right">right</div>
    </section>
</body>
</html>

View Code

相關標籤/搜索

每日一句

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