css中的额外空间

Question

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

这是一个fiddle看起来更糟糕我的页面半身像会让你知道我想要做什么

这是它真正看起来像页面的和`！

你可以看到div“图片”在其中的图片上方有空格，它们的图片在底部被推出，使我的渐变不正确。

我无法弄清楚额外空间的来源

其他

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

Answer 1

你遇到的问题是你的照片DIV顶部的div.spacer正在清除浮动的a.home（侧边栏，如果我没有记错的话）。一种可能的解决方案是将overflow:hidden放在图片DIV上。

（基本上，您可以使用clear来创建所谓的“块格式化上下文”来控制CSS overflow的“范围”。如果您将overflow:hidden应用于图片DIV，然后那个DIV内的clear:both个元素无法清除那个DIV之外的浮动。）

Answer 2

你的图片div的CSS中有top: 200px;

Answer 3

很难说JSFiddle但是：

div.pictures {
    position:relative;
    top:200px;
    width:90%;
    margin:auto;
    background: rgba(255,255,238, 0.25)    
}

看起来top:200px;规则正在增加大量空间。

Answer 4

尝试将<br style="clear:both;" />放在div的末尾！

Answer 5

将div.pictures中的top设置为0px;。但是，很难判断这是否是您想要使用Fiddle的结果。