CSS三欄布局

2021-08-21 23:45:32 字數 1820 閱讀 3049

一、前言

在之前的文章中，我曾經寫到過css兩欄布局（今天，我利用相同的思路來實現三欄布局。所謂的三欄布局，一般指的是「左右側定寬，中間部分自適應」，在這篇文章中，我們將採用5種方式來實現三欄布局。

在這裡我們假設已經對所有元素設定了 

margin:0;


padding:0;
二、布局方式

1.position布局

html**如下：
css**如下：

.left, .right 


/* 左側定位 */


.left 


/* 中間自適應區 */


.center 


/* 右側定位 */


.right
**邏輯方面還是比較清晰的，通過定位，將幾個塊放在一堆。不過其冗餘度太高，而且維護成本和維護難度也相當之大。違背了dry原則（don't repeat yourself）。

2.float + calc 布局

html部分與position中一致。

css部分：

/* 三者共有樣式 */


.left, .center, .right 


/* 左側樣式 */


.left 


/* 中間樣式，關鍵在 calc */


.center 


/* 右側樣式 */


.right
該方式的邏輯還是挺簡單的，三個塊依次浮動，從而形成一行。關鍵部分在於 calc  屬性，其可以動態計算值，在該例中，其用來計算 center 部分的寬度，其為 父元素的寬度（100%）減去左右側實際寬度之和（200 + 200 ），利用該屬性，實現了自適應寬度布局。關於該屬性的具體介紹，參看  。

3.flex布局

html部分：
css部分：

/* 外層容器設定為 flex 布局 */


.container 


/* 左右側定寬處理 */ 


.left, .right 


/* 中間部分自適應布局 */


.center
flex布局一如既往的靈活與簡單。還是那句話，如果不用苦逼的相容ie9及以下瀏覽器，愉快的使用flex布局吧。

4.grid布局

html**部分與flex布局一致

css部分：

.container 


.left, .right 


.center
5.table布局

html與flex布局、grid布局一致

css部分：

.container 


/* 將其子項設定為 table-cell 布局 */


.left, .center, .right 


.left, .right 


.center
table布局很形象，就把其理解為乙個**。不過在實際運用中其實用得比較少。

三、總結

通過上文的分析，咱們可以有五種布局方式，以實現三欄布局。

要檢視完整**，請移步我的github：

CSS布局 三欄布局

題外話 抓狂系列片之叄個我。三欄布局要求說明 兩邊固定寬度，中間自適應，頂部對齊 html文件結構有三種 內層div順序不同 左右中 左中右。實現效果 方法如下 1.左右中 對左右子元素使用了浮動屬性 float 從而脫離了文件流，如果按照正常左中右的順序，會導致右子元素出現在中間子元素的右下方。所...

CSS布局 三欄布局

css布局技術可謂是前端技術中最基礎的技術，就是因為基礎，所以我認為要更加熟練，深入的去掌握，去梳理。採用浮動實現的三欄布局有以下特點及注意事項 注意dom結構的排列順序。因為左右兩側的dom都是浮動布局，而中間的dom則是普通的文件流，所以為了規避瀏覽器正常的頁面渲染，即先解析左側dom 浮動 再...

CSS三欄布局

有這樣一種情況，在兩列布局的基礎上，將列的數量改為三欄。其中左右兩列的寬度固定，中間部分的寬度隨著瀏覽器寬度變化而變化。首先，我們還是介紹一下傳統的方法，就是利用了margin取負值的技巧。如下 三列布局 middle left right css 如下 margin left 1 margin l...