div 中的 css 额外空间

Question

我无法弄清楚如何使我的图片 div 显示在正确的位置

这是一个fiddle这看起来更糟，我的页面半身像会让你了解我正在尝试做什么

这是 的真实样子页面的 `!

如您所见，div“图片”在其中的图片上方有空间，并且图片在底部被推出，使我的渐变不正确。

我不知道多余的空间是从哪里来的

额外的

当您展开浏览器窗口时，右侧会增加额外的空间，直到下一张图片适合，然后它会缩小。我怎样才能让它保持在 10px 直到下一张图片适合

Answer 1

您遇到的问题是图片 DIV 顶部的 div.spacer 正在清除 float 的 a.home(边栏，如果我我没记错)。一个可能的解决方案是将 overflow:hidden 放在图片 DIV 上。

(基本上，您可以通过使用 overflow 创建所谓的“ block 格式化上下文”来控制 CSS clear 的“范围”。如果您应用 overflow:hidden 到图片 DIV，然后该 DIV 内的 clear:both 元素无法清除该 DIV 外的 float 。)