html 两个div 左边的宽度不变右边的随窗口大小变化
时间: 2023-03-20 11:01:44 浏览: 172
HTML+CSS相对宽度和绝对宽度冲突时的div解决方法
要实现左边的div宽度不变,右边的div宽度随窗口大小变化,可以使用CSS中的flex布局。具体来说,可以将这两个div的父元素设置为flex容器,然后将左边的div设置为一个固定宽度,右边的div设置为一个flexible宽度,即可以自动调整大小的宽度。
下面是一个示例代码:
```
<style>
.container {
display: flex;
}
.left {
width: 200px;
background-color: red;
}
.right {
flex: 1;
background-color: blue;
}
</style>
<div class="container">
<div class="left">左边固定宽度</div>
<div class="right">右边自适应宽度</div>
</div>
```
在上面的代码中,左边的div使用了200px的固定宽度,右边的div使用了flex: 1的属性,表示它的宽度可以根据容器剩余的空间自动调整大小。这样,当浏览器窗口大小变化时,右边的div的宽度就会自动调整,而左边的div的宽度不变。
阅读全文