css - Div 在 Div 之下

Question

我的布局在同一行上有两个 div。我需要一个 div 向左浮动，另一个向右浮动，这样无论浏览器大小如何，div 都将保持在各自的一侧，并且当浏览器大小小于两个时，右侧的 div 不会低于左侧 float 的 div分区。

当浏览器缩小时，我需要浏览器在两个 div 相互接触后切断第二个 div。

我有一张图片来说明我的问题，但我没有足够的声望点来发布它。

Answer 1

您真的需要 float div 吗？如果不是，您始终可以为 div 创建一个包装器，设置最小宽度以允许 div 和 relative 或 absolute 的 position 保留彼此相邻，

#wrapper {
  min-width: 250px;
  position: relative
}

然后将内部 div 的显示属性设置为“inline-block”。

.blocks {
  display: inline-block;
  position: absolute;
}

总之，这将创建一个“安全气泡”，即使在调整窗口大小后，您的 div 也可以并排放置而不会跳到下一行。

看看here .

编辑
经过几次尝试和错误，我相信我们有答案。
Javascript.
所以为了节省时间，我将把代码发布到 jsFiddle here .简而言之，我在前面的代码中添加的是一个脚本(在 window.onload 上)您可以获取两个内部 div 的 ID。然后您创建两个对象来保持它们面对的边界的位置，然后比较它们以查看第二个 div(右侧的一个)是否已经越过第一个。 div 中的数字用作位置标记，表明该 div 不会滑到另一个上/下。

*PS 200px 只是演示编号，可以更改)