Как изменить порядок отображения элементов в CSS?

Question

Я имею проблемы, показывая элементы в моей странице

У меня есть такие элементы, как

<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> 

Изображения добавляемые к РОМ по БД записи, и я хочу, чтобы добавить < div> с изменением < a> тег для каждого изображения, чтобы дать пользователю возможность делать что-то (например, изменить источник изображения). Все мои div имеют Css как

display: block; 
float: right; 

и изображения имеют

display: inline-block; 

Моя проблема заключается в том, что

изображения и DIV находятся в неправильном порядке.

, например:

img1 img2 img3 img4 img5 img6  div6 div5 div4 div3 div2 div1 

нажав div6 изменится img6 недвижимость.

Это правильный порядок мне нужно

img1 img2 img3 img4 img5 img6  div1 div2 div3 div4 div5 div6 

Как я могу решить эту проблему? Спасибо!

Answer 1

думать о плавающих элементах, когда они толкают в стек. Если вы хотите дивы выглядеть, как

div1 div2 div3

, то вы должны подтолкнуть его к йот в таком порядке

div3 div2 div1

Но, чем проще и наиболее распространенный способ сделать это, нужно использовать jQuery, чтобы получить индекс нажатого div и применить изменения на изображении с тем же индексом. Вот пример, который скроет изображение по нажатию соответствующей DIV:

$("div").click(function(){ 
    var idx = $(this).index(); 
    $("img:eq("+idx+")").hide(); //change that to whatever operation you want to do on the image 
}); 

---

Это может быть полезно:

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

Answer 2

Я не уверен, что идеальное место размещения/пользователя, но если вы действительно хотите, чтобы img s, расположенные слева и в порядке, и div s, расположенные справа и в порядке ...

Поместите div с в контейнере DIV и стиль его с float: right.

Вам не нужен дополнительный стайлинг; меньше div s не нужно display или float указано, и img не требуется display.