Using absolute image position

Question

I have an list of cliped image , each one has absoulate positon :

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

The problem here is that all of the images are in the same place , I want the go next to others .

I do absolute position because of Cliping image ;

what can I do ?

Answer 1

Why you then position them absolutely?

To dynamically put them right after another, you need to wrap them into something that is not positioned absolutely. Like a relativ positioned list element

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

if you cannot wrap them, you would have to do it with javascript, something like this.

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