css頁面布局之左側定寬,右側自適應

2022-08-02 17:18:13 字數 3877 閱讀 6971

二列布局的特徵是側欄固定寬度,主欄自適應寬度。

三列布局的特徵是兩側兩列固定寬度,中間列自適應寬度。

之所以將二列布局和三列布局寫在一起,是因為二列布局可以看做去掉乙個側欄的三列布局,其布局的思想有異曲同工之妙。對於傳統的實現方法,主要討論上圖中前三種布局,經典的帶有側欄的二欄布局以及帶有左右側欄的三欄布局,對於flex布局,實現了上圖的五種布局。

##### a. float+margin

###### 原理說明:設定兩個側欄分別向左向右浮動,中間列通過外邊距給兩個側欄騰出空間,中間列的寬度根據瀏覽器視窗自適應。

###### dom文件:

```sub

extra

main

```###### 布局步驟:

1. 對兩邊側欄分別設定寬度,並對左側欄新增左浮動,對右側欄新增有浮動。

1. 對主面板設定左右外邊距,margin-left的值為左側欄的寬度,margin-right的值為右側欄的寬度。

###### css清單:

```.sub

.extra

.main

```###### 一些說明:

* 注意dom文件的書寫順序,先寫兩側欄,再寫主面板,更換後則側欄會被擠到下一列(聖杯布局和雙飛翼布局都會用到)。

* 這種布局方式比較簡單明瞭,但缺點是渲染時先渲染了側邊欄,而不是比較重要的主面板。

###### 二列的實現方法

如果是左邊帶有側欄的二欄布局,則去掉右側欄,不要設定主面板的margin-right值,其他操作相同。反之亦然。

##### b. position+margin

###### 原理說明:通過絕對定位將兩個側欄固定,同樣通過外邊距給兩個側欄騰出空間,中間列自適應。

###### dom文件:

```left

main

right

```###### 布局步驟:

1. 對兩邊側欄分別設定寬度,設定定位方式為絕對定位。

1. 設定兩側欄的top值都為0,設定左側欄的left值為0, 右側欄的right值為0。

1. 對主面板設定左右外邊距,margin-left的值為左側欄的寬度,margin-right的值為右側欄的寬度。

###### css清單:

```.sub, .extra

.sub

.extra

.main

```###### 一些說明:

與上一種方法相比,本種方法是通過定位來實現側欄的位置固定。

如果中間欄含有最小寬度限制,或是含有寬度的內部元素,則瀏覽器視窗小到一定程度,主面板與側欄會發生重疊。

###### 二列的實現方法

如果是左邊帶有側欄的二欄布局,則去掉右側欄,不要設定主面板的margin-right值,其他操作相同。反之亦然。

##### c. 聖杯布局(float + 負margin + padding + position)

###### 原理說明:

主面板設定寬度為100%,主面板與兩個側欄都設定浮動,常見為左浮動,這時兩個側欄會被主面板擠下去。通過負邊距將浮動的側欄拉上來,左側欄的負邊距為100%,剛好是視窗的寬度,因此會從主面板下面的左邊跑到與主面板對齊的左邊,右側欄此時浮動在主面板下面的左邊,設定負邊距為負的自身寬度剛好浮動到主面板對齊的右邊。為了避免側欄遮擋主面板內容,在外層設定左右padding值為左右側欄的寬度,給側欄騰出空間,此時主面板的寬度減小。由於側欄的負margin都是相對主面板的,兩個側欄並不會像我們理想中的停靠在左右兩邊,而是跟著縮小的主面板一起向中間靠攏。此時使用相對布局,調整兩個側欄到相應的位置。

###### dom文件:

``````

###### 布局步驟:

三者都設定向左浮動。

設定main寬度為100%,設定兩側欄的寬度。

設定 負邊距,sub設定負左邊距為100%,extra設定負左邊距為負的自身寬度。

設定main的外圍的padding值給左右兩個子面板留出空間。

設定兩個子面板為相對定位,sub的left值為負的sub寬度,extra的right值為負的extra寬度。

###### css清單:

```.main

.sub

.extra

#bd

```###### 一些說明

dom元素的書寫順序不得更改。

當面板的main內容部分比兩邊的子面板寬度小的時候,布局就會亂掉。可以通過設定main的min-width屬性或使用雙飛翼布局避免問題。

###### 二列的實現方法

如果是左邊帶有側欄的二欄布局,則去掉右側欄,不要設定主面板的padding-right值,其他操作相同。反之亦然。

##### d. 雙飛翼布局(float + 負margin + margin)

###### 原理說明:

雙飛翼布局和聖杯布局的思想有些相似,都利用了浮動和負邊距,但雙飛翼布局在聖杯布局上做了改進,在main元素上加了一層div, 並設定margin,由於兩側欄的負邊距都是相對於main-wrap而言,main的margin值變化便不會影響兩個側欄,因此省掉了對兩側欄設定相對布局的步驟。

###### dom文件:

```#main

```布局步驟:

1. 三者都設定向左浮動。

1. 設定main-wrap寬度為100%,設定兩個側欄的寬度。

1. 設定 負邊距,sub設定負左邊距為100%,extra設定負左邊距為負的自身寬度。

1. 設定main的margin值給左右兩個子面板留出空間。

###### css清單:

```.main-wrap

.sub

.extra

.main

```###### 一些說明

聖杯採用的是padding,而雙飛翼採用的margin,解決了聖杯布局main的最小寬度不能小於左側欄的缺點。

雙飛翼布局不用設定相對布局,以及對應的left和right值。

通過引入相對布局,可以實現三欄布局的各種組合,例如對右側欄設定position: relative; left: 190px; ,可以實現sub+extra+main的布局。

###### 二列的實現方法

如果是左邊帶有側欄的二欄布局,則去掉右側欄,不要設定main-wrap的margin-right值,其他操作相同。反之亦然。

##### e. flex布局

以下是五種布局的flex布局**:

###### dom文件:

```側邊欄寬度固定

主內容欄寬度自適應

主內容欄寬度自適應

側邊欄寬度固定

左側邊欄寬度固定

主內容欄寬度自適應

右側邊欄寬度固定

第1個側邊欄寬度固定

第2個側邊欄寬度固定

主內容欄寬度自適應

主內容欄寬度自適應

第1個側邊欄寬度固定

第2個側邊欄寬度固定

```###### css清單

```.layout

.layout__main

.layout__aside

```##### f.table布局

```1.這是三欄布局的浮動解決方案;

2.這是三欄布局的浮動解決方案;

3.這是三欄布局的浮動解決方案;

4.這是三欄布局的浮動解決方案;

5.這是三欄布局的浮動解決方案;

6.這是三欄布局的浮動解決方案;

```##### g.grid布局

```1.這是三欄布局的浮動解決方案;

2.這是三欄布局的浮動解決方案;

3.這是三欄布局的浮動解決方案;

4.這是三欄布局的浮動解決方案;

5.這是三欄布局的浮動解決方案;

6.這是三欄布局的浮動解決方案;

```

css布局之左側固定右側自適應布局

1.固定高度 左側固定 右側欄自適應寬度 title style type text css mainbody leftcol rightcol style head body divid mainbody divid leftcol div divid rightcol div div body ...

CSSS實現右側定寬左側自適應

csss實現右側固定寬度,左側自適應,或者左惻固定寬度右側自適應 首先,html結構如下 注意,html中必須使用div標籤,不要妄圖使用p標籤來達到目的。因為div有個預設屬性,即如果不設定寬度,那他會自動填滿他的父標籤的寬度。clearfix after container content在le...

html css實現左側定寬,右側自適應的布局

實現一側定寬,一側自適應的布局的方法a b a 利用左側元素浮動,或者絕對定位的方式使其脫離常規文件流 1 利用float和margin來實現 csshtml 張藝興,努力,努力,再努力!努力,努力,再努力!不知道幹什麼,我先乾好自己現在手頭的工作!瀏覽器 591 x 806 效果圖 2 利用flo...