css怎么样实现一个盒子的宽度缩小后另一个挨着的盒子的宽度变大撑满父盒子
时间: 2024-02-28 19:52:59 浏览: 154
css3 + js实现3D盒子,可用滚轮及拖拽调整视角3Dbox.html
你可以使用CSS中的flex布局来实现一个盒子的宽度缩小后另一个挨着的盒子的宽度变大撑满父盒子。具体做法是给这两个盒子的父元素设置display: flex属性,并设置flex属性和flex-shrink属性。例如:
HTML代码:
```
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
```
CSS代码:
```
.container {
display: flex;
}
.box1 {
flex: 0 0 auto;
}
.box2 {
flex: 1 1 auto;
}
```
在上述代码中,.container是这两个盒子的父元素,设置了display: flex属性,表示使用flex布局。.box1的flex属性值为0 0 auto,表示不可伸缩,不可缩小,宽度由内容撑开。.box2的flex属性值为1 1 auto,表示可伸缩,可缩小,宽度也由内容撑开。这样,当.box1的宽度缩小后,.box2的宽度会自动变大,撑满父盒子。
需要注意的是,如果.box1的宽度小于内容宽度,.box2也会跟着缩小。因此,如果想保持.box2的宽度不变,可以给.box2设置一个min-width属性,保证最小宽度不变。
阅读全文