Question

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

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

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

Answer 1

你真的需要漂浮div吗？如果不是，你总是可以为div设置一个包装器，其最小宽度设置为允许div和position relative或absolute保持彼此相邻，

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

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

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

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

请查看here。

修改的经过几次试验和错误后，我相信我们有了答案的JavaScript。
因此，为了节省时间，我将在jsFiddle here上发布代码。很简单，我在前面的代码中添加了一个脚本（在window.onload上），你得到了两个内部div的id。然后创建两个对象来保持它们面对边框的位置，然后比较它们以查看第二个div（右边的一个）是否已经越过第一个div。 div中的数字作为一个位置标记，表示div不会滑到另一个上面/下面。

* PS 200px只是一个演示号码，可以更改）

Answer 2

我假设你所说的“切断”的意思是你希望左边的div出现在“正面div”的前面。要做到这一点，你想给左边的div css

{
 position:absolute;
 left:0px;
 z-index:2;
 display:inline-block;
 width:[number]px;
 height:[number]px;
}

和正确的div

{
 position:absolute;
 right:0px;
 z-index:1;
 display:inline-block;
 width:[number]px;
 height:[number]px;
}

和他们共享的父div添加css“position：relative;”。

或者，给两个div“position：fixed;”可能会工作，这使得它们相对于浏览器边缘而不是父div，虽然这会在人们尝试滚动时给你非常不同的结果。你还需要给左边的div一个不透明的背景，或者它们只是重叠。还要注意“位置：绝对;”把div“放在流动之外”，因为它们也会与你放入的任何东西重叠，而你的设计必须考虑到这一点。

工作示例http://jsfiddle.net/RdX5P/

如果“浏览器需要切断第二个div”，你的意思是你希望第二个div在窗口变得太小时消失，只需浮动两个div并将它们放入一个设置高度的容器div中“溢出：隐藏;”

Div属于Div

2 个答案: