八十八、CSS兩列三列的布局方式

@Author：Runsen

文章目錄

兩列布局

左邊定寬 ，右邊自適應

彈性布局，flex實現

表格方式

三列布局

左邊左浮 右邊浮動 中間定寬

Flex 布局

兩列布局

左邊定寬 ，右邊自適應

想到的就是 float + margin 來實現兩列布局，首先實現左欄定寬，主內容自適應的兩欄布局。

float + margin 和absolute + margin 方式完全一樣。

實現思路：

1.先設置左邊的寬度，讓盒子左浮動；

2.設置右邊的盒子，margin-left: 左邊盒子的寬度。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

但是網上說定寬元素浮動與自適應浮動元素不浮動存在兼容的問題。

彈性布局，flex實現

flex布局實現關鍵點解析

父元素設置display:flex;和justify-content:space-bettween;(兩端對齊)

父元素根據需要設置align-item:center;以實現垂直居中

圖片固寬元素不需要特殊設置，寬高即可

流體文案設置flex:1;自動分配剩余空間。

flex布局本來就是設計來自適應的，只需要用上flex: 1;，就能讓right分到parent的寬度減去left的寬度。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

表格方式

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

三列布局

左邊左浮 右邊浮動 中間定寬

左邊左浮 右邊浮動 中間定寬也就是流體布局

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

左右模塊各自向左右浮動，并設置中間模塊的 margin 值使中間模塊寬度自適應。

缺點就是主要內容無法最先加載，當頁面內容較多時會影響用戶體驗。

Flex 布局

Flex 布局中的flex: 1就是自定義布局。下面代碼是左右固定，中間自適應

.container{ display: flex; height: 300px; } .left{ width: 100px; background-color: red; } .middle{ flex: 1; background-color: green; } .right{ width: 100px; background-color: blue; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

CSS

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。