CSS布局 三欄布局

2021-08-14 17:54:43 字數 1224 閱讀 2739

題外話：抓狂系列片之叄個我。

三欄布局要求說明：兩邊固定寬度，中間自適應，頂部對齊

html文件結構有三種（內層div順序不同）：左右中、左中右。

實現效果：

方法如下：

1.左右中：對左右子元素使用了浮動屬性（float），從而脫離了文件流，如果按照正常左中右的順序，會導致右子元素出現在中間子元素的右下方。所以，浮動元素應該盡可能高的放置。

left


right


middle
利用float屬性，左子元素float設定為left，右子元素float設定為right，中間子元素設定margin-left為左子元素width，margin-right為右子元素width。（後附bfc說明）

.outer


.left


.middle


.right
2.左右中：利用position定位屬性，父元素absolute，左右子元素absolute並分別設left為0，right為0，中間元素取margin-left和margin-right分別為做右子元素的寬度

.outer


.left


.middle


.right
3.左中右：設定屬性display:flex （後附flex屬性值說明）

left


middle


right
設定父元素的display屬性為flex，其內容兩端對齊。指定子元素的高度以撐起容器，中間子元素寬度設定為100%。
.outer


.left


.middle


.right
附：1.bfc（block formatting context，塊級格式化上下文）：簡單來說，bfc決定了元素對其內容的定位，以及與其他元素的關係和相互作用。再簡言之，bfc內部的元素和外部的元素不會相互影響。

能夠觸發bfc的條件：

2.display：flex

將元素設定為彈性布局，其子元素的float、clear和vertical-align均會失效

CSS布局 三欄布局

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

div 布局 CSS布局 三欄布局

所謂三欄布局，通常是指左右兩欄定寬，中間一欄自適應頁面寬度填滿剩餘空間的布局。這裡有一點細節 主要內容部分，即中間欄dom放在了左右兩欄dom之前，在dom樹渲染的時候會被優先渲染。div聖杯布局的原理是 container設定了padding之後浮動子元素的寬度計算100 是相對於containe...

CSS 三列布局（三欄布局）

傳統三列布局 左右定寬，中間自適應 1.絕對定位 外邊距實現 左右盒子絕對定位，固定於頁面左右兩側 中間盒子的 margin left,margin right 分別等於左右兩個盒子的寬度。css left middle right 2.浮動 外邊距實現 左右盒子浮動到頁面兩側，中間盒子的 marg...