Question

我有一张cliped图片列表，每张图片都有绝对的位置：

<img style='position:absolute;clip(xpx xpx xpx xpx);'/>
<img style='position:absolute;clip(xpx xpx xpx xpx);'/>
<img style='position:absolute;clip(xpx xpx xpx xpx);'/>
<img style='position:absolute;clip(xpx xpx xpx xpx);'/>
<img style='position:absolute;clip(xpx xpx xpx xpx);'/>

这里的问题是所有的图像都在同一个地方，我希望旁边的其他图像。

由于剪辑图像，我做绝对位置;

我该怎么办？

Answer 1

为什么你绝对定位它们？

要动态地将它们放在另一个之后，您需要将它们包装成绝对定位的内容。就像一个相对定位的列表元素

<ul>
   <li style="position:relative">
        <img src="" style="position:absolute" />
   </li>
</ul>

如果你不能包装它们，你必须使用javascript，这样的事情。

var memo = 0;
$("img").each(function() {
   $(this).css("left", memo+"px");
   memo += $(this).outerWidth(true);
});

Answer 2

位置绝对会使您的元素脱离元素流。因此，你的元素不会相互推动。

如果你真的必须使用绝对位置，你需要为每个img设置不同的css属性left。顶部和左侧的标准值为0.因此它们位于相同位置或彼此之上。

Answer 3

使用float：left，或将每个图像的left属性设置为所有先前图像的宽度之和。

Answer 4

如果元素必须绝对定位，您可以使用:nth-child()或:nth-of-type()选择器并相应地调整left: Xpx。

另一个选项，因为您使用的是内联样式，只需将left:和/或top:值粘贴到您想要的位置即可。

那就是说，似乎使用clip导致的问题超出了它的价值！必须有办法解决这个问题。

使用绝对图像位置

4 个答案: