首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何停止其中一个div自动调整大小以达到另一个div的长度

要停止其中一个 div 自动调整大小以达到另一个 div 的长度,可以使用 CSS 的属性来控制。

方法一:使用固定宽度 可以为其中一个 div 设置一个固定的宽度,使其不再自动调整大小以匹配另一个 div 的长度。假设要停止 div1 自动调整大小以匹配 div2 的长度:

代码语言:txt
复制
<div class="container">
  <div class="div1">内容1</div>
  <div class="div2">内容2</div>
</div>
代码语言:txt
复制
.container {
  display: flex;
}

.div1 {
  width: 200px; /* 设置一个固定宽度 */
}

.div2 {
  flex-grow: 1; /* 充满剩余的空间 */
}

这样 div1 的宽度将保持为固定的 200px,而 div2 将占据剩余的空间。

方法二:使用 JavaScript 可以使用 JavaScript 来监听 div2 的长度,并将其应用到 div1 上。以下是一个示例:

代码语言:txt
复制
<div class="container">
  <div class="div1">内容1</div>
  <div class="div2" id="target">内容2</div>
</div>
代码语言:txt
复制
.container {
  display: flex;
}

.div1 {
  width: 100%; /* 让 div1 占据整个宽度 */
}
代码语言:txt
复制
window.addEventListener('resize', function() {
  var div2Width = document.getElementById('target').offsetWidth;
  document.querySelector('.div1').style.width = div2Width + 'px';
});

以上代码将监听窗口大小变化,并将 div2 的宽度应用到 div1 上,使其保持一致。

请注意,以上只是两种常见的方法,具体使用哪种方法取决于实际需求和项目情况。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券