3

我有一个剪辑图像列表，每个都有绝对位置：

<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);'/>

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

由于裁剪图像，我做绝对位置；

我能做些什么 ？

4

4 回答 4

2

为什么你然后绝对定位它们？

要动态地将它们一个接一个地放置，您需要将它们包装到非绝对定位的东西中。就像一个相对定位的列表元素

<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);
});
于 2013-04-25T19:33:00.427 回答
1

position absolute 将您的元素从元素流中取出。因此，您的元素不会相互推动。

如果你真的必须使用绝对位置，你需要为每个img设置不同的css属性。top 和 left 的标准值为 0。因此它们在同一个位置，或者在彼此之上。

于 2013-04-25T19:35:20.773 回答
0

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

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

也就是说，似乎使用clip造成的问题比它的价值还多！一定有办法解决这个问题。

于 2013-05-04T22:47:35.730 回答
0

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

于 2013-04-25T19:32:36.207 回答