CSS在div中定位两个图像

Question

我正在尝试以这种方式设置图片：一个位于顶部，另一个位于此之下。 实际上我做错了什么，在我的结果图像是一个在另一个之下。 这是 jsFiddle。

第二张图片由overflow:hidden类中的slider隐藏。

问题：

我犯错误的地方？我确信有一个简单的解决方案，但我失去了一些时间，找不到它。

P.S。 如果有可能我只是在寻找具有css更改的解决方案。

Answer 1

将图片的CSS更改为：

img{
    display:block;
}

这就是诀窍。

评论后编辑：

img{
    position: absolute;
    z-index: -1;
    top: 0px;
    left:0;    
}

在左上角将所有图像拼接在一起。

Answer 2

我认为你的img必须

img
{
display:block; /*if you want top to bottom use display:inline;*/

}

Answer 3

我看到你已经标记了一个答案，但我已经输入了这个，所以你在这里：）

您可以通过移除浮动来简化您的CSS，如果您只使用滑块的图像（图像旁边没有文字），您甚至可以通过移除整个{{{}来简化HTML。 1}} div。

简化代码：

.photo

http://jsfiddle.net/daCrosby/MP6qN/8/