中小站长与DIV+CSS网页布局开发技术人员的首选CSS学习平台
2024年11月20日
CSS 实现两边固定宽，中间自适应
- Flexbox 实现：
- css复制代码.container {
display: flex;
}
.fixed {
width: 200px; /* 两边固定宽度 */
}
.flexible {
flex: 1; /* 中间自适应 */
}html复制代码<div class="container">
<div class="fixed">Left</div>
<div class="flexible">Center</div>
<div class="fixed">Right</div>
</div> - Grid 实现：
- css复制代码.container {
display: grid;
grid-template-columns: 200px 1fr 200px; /* 两边固定宽度，中间自适应 */
}html复制代码<div class="container">
<div class="fixed">Left</div>
<div class="flexible">Center</div>
<div class="fixed">Right</div>
</div>
标签：css让div固定在底部