兩列布局 但只用右浮動

2022-01-11 20:21:55 字數 1468 閱讀 1072

通過這個實驗我明白了乙個知識點,做左右結構的時候,不用把左邊的寫上左浮動,只需要把有浮動的塊放到最前邊,並設定有浮動,左邊的放在有浮動的下邊而且不用管,這樣,父元素也不用清楚浮動,左邊的元素也不用左浮動,一切就依舊會和自己做左右布局的老方法一樣的效果。切記,結構上,把有浮動的元素放到前邊,並設定右浮動。

為了試驗不用清楚浮動,我把clearfix的相關**登出了。

上**:

1

doctype html

>

2<

html

>

3<

head

>

4<

meta

charset

="utf-8"

>

5<

title

>

title

>

6<

style

type

="text/css"

>7/*

.clearfix:after

12.clearfix

*/15

div20

div.right

25div.nofloat

28div.nofloat p

29div.nofloat span

30style

>

31head

>

32<

body

>

33<

div

class

="cont clearfix"

>

34<

div

class

="right"

>

3536

div>

37<

div

class

="nofloat"

>

38通過這個實驗我明白了乙個知識點,做左右結構的時候,不用把左邊的寫上左浮動,只需要把有浮動的塊放到最前邊,並設定有浮動,左邊的放在有浮動的下邊而且不用管,這樣,父元素也不用清楚浮動,左邊的元素也不用左浮動,一切就依舊會和自己做左右布局的老方法一樣的效果。切記,結構上,把有浮動的元素放到前邊,並設定右浮動。

39<

p>坎坎坷坷擴擴擴擴擴擴擴擴擴擴擴擴擴擴擴擴擴擴擴擴擴擴擴擴擴擴擴擴擴擴擴擴擴擴擴

p>

40<

span

>非愛不可

span

>

41div

>

42div

>

43body

>

44html

>

目前還沒測試弊端,就看平時需要的布局效果都能實現,不浮動的左半塊放塊元素內聯元素都可以了,以後發現問題再補充。

兩列布局 多列布局

用css html編寫乙個兩列布局的網頁,要求右側寬度為200px,左側自動擴充套件 container left div right div div 利用浮動float margin container left right利用彈性盒子來寫 container left right利用定位posi...

兩列布局 三列適應布局 兩列等高適應布局。

一.兩列布局 左側定寬 右側自適應。四種方法 flex position float和負外邊距 外邊距 1.使用flex.右側自適應區塊 左側定寬200px區塊 2.使用position,考慮了頁面優化,右側區域先載入。右側自適應區塊 左側定寬200px區塊 3.利用float和負外邊距 這裡的10...

頁面布局 兩列布局

left right right css left right簡單的布局方法,左側設定浮動,右側設定margin left 避免環繞左側 的布局方法 left right right css left right fix right通過在html檔案的right上套上一層right fix,然後對r...