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>

图片正在通过数据库记录添加到dom，我想添加＆lt; div＆gt;并更改＆lt; a＆gt;每个图像的标记用户可以选择执行操作（例如更改图像源）。我的所有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

想到浮动元素，因为它们正在推动堆栈。如果你想让div看起来像

div1 div2 div3

然后你必须按顺序将它推到dom

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
});

这可能有用：

Answer 2

我不确定展示位置/用户互动是否理想，但如果您确实希望img排列在左侧并按顺序排列，div排列在右侧，按顺序...

将div放入容器div中，并使用float: right设置样式。

你不需要任何额外的造型;较小的div不需要指定display或float，img不需要指定display。

如何在CSS中更改元素显示顺序？

2 个答案: