javascript - 如何防止一个 div 在调整大小时与另一个 div 重叠？

当我使浏览器窗口从右侧变窄时，最近的推文 div 将位于容器 div 的下方。我想让最近的推文 div 不能比容器 div 的右手边更靠左。我一直在试图弄清楚它是否可以用 css 来完成，但我似乎无法理解。是否有符合要求的简单 javascript 解决方案？

谢谢!

最佳答案

您可以选择使用流式布局或使用 css 属性 position。

流式布局:

你的 wrapper div 中有 3 个 DIV，你希望它们在较小的浏览器窗口中调整大小，你可以使用变为可变宽度的百分比来做到这一点:

CSS:

.wrapper {
  width:100%
}
.divleft {
  float:left;
  width:20%
}
.divmiddle {
  float:left;
  width:60%
}
.divright {
  float:left;
  width:20%
}

html:

<div class="wrapper">
   <div class="divleft">left</div>
   <div class="divmiddle">middle</div>
   <div class="divright">right</div>
</div>

正如我所说，另一种可能性是将 css 属性 position 分配给不同的 DIV。

自己尝试一下，相当简单:

关于javascript - 如何防止一个 div 在调整大小时与另一个 div 重叠？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2431384/