div中的css额外空间

Question

我很难搞清楚怎么把我的照片放在正确的地方

这是一个小提琴，它看起来更糟--我的页面半身像会让你知道我想做什么

下面是它的真实外观

在页面和

`！

正如你所看到的，div“图片”在图片的上方有空间，图片在底部被推开，使我的渐变不正确。

我不知道额外的空间是从哪里来的

附加

在您展开浏览器窗口时，右侧还有更多的空间，直到下一张图片适合时，它才会缩小。我怎样才能把它保持在10 at，直到下一张照片合身。

Answer 1

您面临的问题是图片顶部的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;规则增加了重要的空间。