Q:

How to change elements display order in CSS?

I am having a trouble showing the elements in my page
I have elements like
<img src='test1.jpg'>
<div>
<a href='#'>change</a>
</div>

<img src='test2.jpg'>
<div>
<a href='#'>change</a>
</div>

<img src='test3.jpg'>
<div>
<a href='#'>change</a>
</div>

<img src='test4.jpg'>
<div>
<a href='#'>change</a>
</div>

<img src='test5.jpg'>
<div>
<a href='#'>change</a>
</div>

<img src='test6.jpg'>
<div>
<a href='#'>change</a>
</div>

The images are adding to the dom by DB record and I want to add the <div>with change <a> tag for every images to give
the user an option to do things (like change image source). All my div have css like
display: block;
float: right;

and images have
display: inline-block;

My problem is that
the images and the div are in the wrong order.
for example:
img1 img2 img3 img4 img5 img6        div6  div5 div4 div3 div2 div1

clicking div6 will change img6 property.
This is the correct order I need
img1 img2 img3 img4 img5 img6        div1  div2 div3 div4 div5 div6

How can I fix this issue? Thanks so much!

A:

think of floating elements as they are pushing to a stack. If you want the divs to appear like 
div1 div2 div3
then you have to push it to the dom in that order
div3 div2 div1
But, the easier and the more common way to do it, is to use jQuery to get the index of the clicked div  and apply the changes on the image that has the same index. Here is an example that will hide the image on clicking the corresponding div:
$("div").click(function(){
    var idx = $(this).index();
    $("img:eq("+idx+")").hide(); //change that to whatever operation you want to do on the image
});

This might be useful:

http://docs.jquery.com/Selectors/eq 
http://api.jquery.com/index/

