在我的画廊中裁剪图像，但它们堆叠在一起。我如何让他们彼此相邻？

Question

以下是代码：

<div class="crop">
<img src="image1.jpg" alt="image1.jpg" />
<img src="image2.jpg" alt="image2.jpg" />
</div>

.crop{
float:left;
margin:2px;
overflow:hidden; /* this is important */
position:relative; /* this is important too */
width:320px;
height:240px;
}
.crop img{
position:absolute;
top:-0px;
left:-0px;
}

我猜我需要在CSS中添加一些东西？我知道一个解决方案是将图像作为单独的div放置：

<div class="crop">
<img src="image1.jpg" alt="image1.jpg" />
</div>
<div class="crop">
<img src="image2.jpg" alt="image2.jpg" />
</div>

但是我的画廊中有下一个/上一个箭头，所以我需要将图像放在同一个div中，否则箭头将不起作用。

Answer 1

我认为它们出现在同一个地方的原因是因为它们共享相同的css类，只是用不同的顶部/左侧坐标命名它们。