效果实现类问题
Youky ... 2025-9-11 About 1 min
# 效果实现类问题
# 两列自适应布局（左侧固定宽度，右侧自适应占满剩余空间）
描述：左侧固定宽度（比如 100px），右侧占满剩余宽度
- 左侧元素设置固定 width 和浮动
- 右侧触发 BFC
<div style="height: 100px;width: 100px;float: left;">左侧固定元素</div>
<div style="height: 200px;overflow:hidden;background-color:#777">
右侧自适应元素
</div>
1
2
3
4
2
3
4
# 三列自适应布局（也叫圣杯布局，左右固定宽度，中间自适应），且中间元素要最先加载
- 最先加载意味着标签写在前面
- 用
order属性控制元素的顺序 - 用
flex-grow:1实现中间元素的自适应宽度
<style>
div {
height: 200px;
}
#container {
display: flex;
width: 100vw;
}
.left {
order: 1;
width: 100px;
}
.middle {
order: 2;
flex-grow: 1;
}
.right {
order: 3;
width: 100px;
}
</style>
<body>
<div id="container">
<div class="middle">2</div>
<div class="left">1</div>
<div class="right">3</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
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
# CSS 实现三角形
思路：宽高为 0，通过 border 展示颜色；方向上，两侧设置为透明，对侧设置颜色
eg：向上的三角形
.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red; /* 三角形颜色 */
}
1
2
3
4
5
6
7
2
3
4
5
6
7