八十八、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小时内删除侵权内容。