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

Posted 2023-02-25

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

【英文标题】：Cropped images in my gallery but they are stacked on top of each other. How do I get them next to each other instead?

【发布时间】：2012-11-26 13:13:13

【问题描述】：

代码如下：

<div class="crop">
<img src="image1.jpg"  />
<img src="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"  />
</div>
<div class="crop">
<img src="image2.jpg"  />
</div>

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

【问题讨论】：

摆脱.crop img 规则。

【参考方案1】：

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