技术交流
各类技术交流
leo
14级 帖子：125
精华：0
积分：250
注册：2015-12-14
div css 一个div宽度固定，另一个div自适应
在CSS中，如果你想要一个div的宽度固定，而另一个div根据剩余空间自适应，你可以使用几种不同的方法来实现这一布局。
这里我将介绍几种常见的方法：
方法1：使用Flexbox
Flexbox是一个非常强大的布局工具，可以轻松实现这种布局。
【HTML代码】
＜div class="container"＞
＜div class="fixed-width">固定宽度
＜div class="auto-width">自适应宽度
＜/div＞
注：由于论坛中无法直接发布HTML代码，因此，代码中的尖括号使用了中文尖括号，在使用时，需要将尖括号使用英文尖括号替换一下。
【CSS代码】
.container {
display: flex;
}
.fixed-width {
width: 200px; /* 设置固定宽度 */
background-color: lightblue; /* 仅为了区分 */
}
.auto-width {
flex-grow: 1; /* 自适应宽度 */
background-color: lightgreen; /* 仅为了区分 */
}
---------------------------------------------------------------------------
方法2：使用Grid布局
Grid布局也是一个强大的布局工具，可以用来实现类似的效果。
【HTML代码】
＜div class="container"＞
＜div class="fixed-width">固定宽度
＜div class="auto-width">自适应宽度
＜/div＞
注：由于论坛中无法直接发布HTML代码，因此，代码中的尖括号使用了中文尖括号，在使用时，需要将尖括号使用英文尖括号替换一下。
【CSS代码】
.container {
display: grid;
grid-template-columns: 200px 1fr; /* 第一列固定宽度，第二列自适应 */
}
.fixed-width {
background-color: lightblue; /* 仅为了区分 */
}
.auto-width {
background-color: lightgreen; /* 仅为了区分 */
}
查看移动版
← 扫码查看移动版【转发给朋友】或【分享到朋友圈】
1、查看方法：使用手机微信扫描二维码，打开本页移动端页面。
2、分享方法：在打开的本页移动端页面，点击右上角的“...”，选择【转发给朋友】或【分享到朋友圈】即可。
2、分享方法：在打开的本页移动端页面，点击右上角的“...”，选择【转发给朋友】或【分享到朋友圈】即可。
关注公众号
