要停止其中一个 div 自动调整大小以达到另一个 div 的长度,可以使用 CSS 的属性来控制。
方法一:使用固定宽度 可以为其中一个 div 设置一个固定的宽度,使其不再自动调整大小以匹配另一个 div 的长度。假设要停止 div1 自动调整大小以匹配 div2 的长度:
<div class="container">
<div class="div1">内容1</div>
<div class="div2">内容2</div>
</div>
.container {
display: flex;
}
.div1 {
width: 200px; /* 设置一个固定宽度 */
}
.div2 {
flex-grow: 1; /* 充满剩余的空间 */
}
这样 div1 的宽度将保持为固定的 200px,而 div2 将占据剩余的空间。
方法二:使用 JavaScript 可以使用 JavaScript 来监听 div2 的长度,并将其应用到 div1 上。以下是一个示例:
<div class="container">
<div class="div1">内容1</div>
<div class="div2" id="target">内容2</div>
</div>
.container {
display: flex;
}
.div1 {
width: 100%; /* 让 div1 占据整个宽度 */
}
window.addEventListener('resize', function() {
var div2Width = document.getElementById('target').offsetWidth;
document.querySelector('.div1').style.width = div2Width + 'px';
});
以上代码将监听窗口大小变化,并将 div2 的宽度应用到 div1 上,使其保持一致。
请注意,以上只是两种常见的方法,具体使用哪种方法取决于实际需求和项目情况。
领取专属 10元无门槛券
手把手带您无忧上云