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

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 类，只是用不同的上/左坐标来命名它们。