0

我有一组具有相同宽度和高度的 div。全部设置为向左浮动，占其容器的 50%（容器为页面的 100% 宽度）。在某些屏幕宽度上，几个 div 移动了 50% 以上，就好像它旁边还有另一个元素一样。

<div class="container">
<div class="pod">
<img />
</div>

<div class="pod">
<img />
</div>
</div>

如果我调整窗口的宽度，我可以解决这个问题。这发生在多个窗口宽度和（据我所见）仅在 FireFox 中。

我将在 jsfiddle 上工作，看看我是否可以复制它来展示它。在那之前，有没有人处理过这个问题并发现了这个问题？

----- 编辑 ----- 我也可以通过更改页面宽度在 Chrome 中重现这一点。它只是在 FireFox 中更常见。

如果我将框从 50% 更改为 47%，问题就会消失......

----- 编辑 ----- 结果是我正在做的“分裂”导致了这个问题。

两个jsFiddles：

div 现在如何响应（我忘了提到一些 div 是“分裂的”。直到现在才认为这是问题的一部分） http://jsfiddle.net/dcp3450/xvMHR/

没有拆分的 div 如何响应：http: //jsfiddle.net/dcp3450/Xzrgv/

我认为嵌套的“50%”会导致拆分项目进行一些舍入，这会导致问题。关于这是否属实以及如何解决问题的任何想法？

4

1 回答 1

0

首先，如果您还没有它，请获取Firebug。

然后使用元素检查器并开始从 DOM 中删除内容。有时文本可能会超出除法元素的高度，因此请先尝试删除文本，然后再向上遍历父元素。

这是我在没有看到 (X)HTML 和 CSS 的情况下能告诉你的最多的内容。

您也可以overflow像这样设置除法元素...

<div style="overflow: scroll;"></div>

...或者...

<div style="overflow: auto;"></div>
于 2013-09-24T17:46:39.087 回答