八十八、CSS两列三列的布局方式
【摘要】 @Author：Runsen
2020/11/30、 周一、今天又是奋斗的一天。
文章目录
两列布局左边定宽 ，右边自适应弹性布局，flex实现表格方式
三列布局左边左浮 右边浮动 中间定宽Flex 布局
两列布局
左边定宽 ，右边自适应
想到的就是 float + margin 来实现两列布局，首先实现左栏定宽，主内容自适应的两栏布...
@Author：Runsen
| 2020/11/30、 周一、今天又是奋斗的一天。 |
两列布局
左边定宽 ，右边自适应
想到的就是 float + margin 来实现两列布局，首先实现左栏定宽，主内容自适应的两栏布局。
float + margin 和absolute + margin 方式完全一样。
实现思路：
1.先设置左边的宽度，让盒子左浮动；
2.设置右边的盒子，margin-left: 左边盒子的宽度。
<head>
<style> #left { /* 定宽 */ width: 400px; height: 300px; background-color: #c9394a; /* 当前元素脱离文档流 */ float: left; /* 也可以用 position: absolute; */ } #right { background-color: #cccccc; margin-left: 400px; height: 300px; }
</style>
</head>
<body>
<div id="left"></div>
<div id="right"></div>
</body>
- 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的宽度。
<head>
<style> #parent { display: flex; /* justify-content: center; align-items: center; */ } #left { width: 200px; height: 100px; background: #245524; } #right { flex: 1; height: 100px; background: #785778; }
</style>
</head>
<body>
<div id="parent"> <div id="left"></div> <div id="right"></div>
</div>
</body>
- 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
表格方式
<head>
<style> #parent { /* 表格的单元格的宽度会自动分配 */ display: table; /* table-layout: fixed; */ width: 100%; } #left { /* 定宽 */ width: 400px; height: 300px; display: table-cell; background-color: #c9394a; } #right { height: 300px; display: table-cell; background-color: #cccccc; }
</style>
</head>
<body>
<div id="parent"> <div id="left"></div> <div id="right"></div>
</div>
</body>
- 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
三列布局
左边左浮 右边浮动 中间定宽
左边左浮 右边浮动 中间定宽也就是流体布局
<!DOCTYPE html>
<html lang="en">
<head> <style>
.left { float: left; height: 200px; width: 100px; background-color: red;
}
.right { width: 200px; height: 200px; background-color: blue; float: right;
}
.main { margin-left: 120px; margin-right: 220px; height: 200px; background-color: green;
} </style>
</head>
<body> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="main"></div> </div>
</body>
</html>
- 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; } <div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
文章来源: maoli.blog.csdn.net，作者：刘润森！，版权归原作者所有，如需转载，请联系作者。
原文链接：maoli.blog.csdn.net/article/details/110452788
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）