布局解決方案之多列布局

2022-08-30 02:48:10 字數 3536 閱讀 6603

1、定寬與自適應布局

方案1：float + margin

css**：

1


.left


6.right

html**：

123


left45


6right


7right89

方案2：float + margin + (fix)

css**:

1


.left


6.right-fix


11.right

html**：

1


<


div 


class


="parent"


>


2<


div 


class


="left"


>


3<


p>left


p>


4div


>


5<


div 


class


="right-fix"


>


6<


div 


class


="right"


>


7<


p>right


p>


8<


p>right


p>


9div


>


10div


>


11div


>

方案3：float + overflow

1


.left


6.right

html**：

<


div 


class


="parent"


>


<


div 


class


="left"


>


<


p>left


p>


div>


<


div 


class


="right"


>


<


p>right


p>


<


p>right


p>


div>


div>

方案4：flex

1


.parent


4.left


8.right

html**：

1


<


div 


class


="parent"


>


2<


div 


class


="left"


>


3<


p>left


p>


4div


>


5<


div 


class


="right"


>


6<


p>right


p>


7<


p>right


p>


8div


>


9div


>

由於flex效能問題，所以flex多用於小範圍布局。

2、不定寬與自適應布局

方案1：利用定寬與自適應布局方案的方案3來實現，參照上文。

方案2：利用定寬與自適應布局方案的方案4來實現，參照上文。

3、等分布局（等寬+等間距）

方案1：float（以4列為例）

css**

1


.parent


4.column

html**：

1


<


div 


class


="parent"


>


2<


div 


class


="column"


><


p>1


p>


div>


3<


div 


class


="column"


><


p>2


p>


div>


4<


div 


class


="column"


><


p>3


p>


div>


5<


div 


class


="column"


><


p>4


p>


div>


6div


>

方案2：flex

css**：

1


.parent


4.column


7.column+.column

html**：

1


<


div 


class


="parent"


>


2<


div 


class


="column"


><


p>1


p>


div>


3<


div 


class


="column"


><


p>2


p>


div>


4<


div 


class


="column"


><


p>3


p>


div>


5<


div 


class


="column"


><


p>4


p>


div>


6div


>

4、等高布局

方案1：利用定寬與自適應布局的方案4來實現，參照上文。

方案2：float

css**：

1


.parent


4.left,.right


8.left


14.right

html**：

1


<


div 


class


="parent"


>


2<


div 


class


="left"


>


3<


p>left


p>


4div


>


5<


div 


class


="right"


>


6<


p>right


p>


7<


p>right


p>


8div


>


9div


>

布局解決方案 居中布局

實現不定寬盒子的水平居中效果。解決方案 如下 注意 text align center 是對內聯元素起作用。會被子元素繼承。這個方法的優點是相容性好 雖然在ie6,ie7下面不支援display inline block這個屬性，但是可以用display inline zoom 1兩者的使用模仿di...

css布局解決方案

總結css布局 1 水平布局 1 display inline block text algin center a 原理 用法 原理 先將子框由塊級元素變為行內元素，再通過設定行內元素居中以到水平居中 用法 對子框設定display inline block,對父元素設定text algin cen...

CSS布局解決方案

使用inline block text align en parent child dome 複製 效果 3.使用absolute transform en parent child dome 複製 效果 4.使用flex margin en parent child dome 複製 效果 5.使用...