0

我在显示页面中的元素时遇到问题

我有像

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

图像通过 DB 记录添加到 dom 中，我想为每个图像添加 < div>with change < 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

我该如何解决这个问题？非常感谢！

4

2 回答 2

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

这可能有用：

于 2013-02-13T00:15:28.727 回答
1

我不确定放置/用户交互是否理想，但是如果您真的希望imgs 排列在左侧并按顺序排列，而divs 排列在右侧并按顺序排列...

将divs 放入容器 div 并使用float: right.

您不需要任何额外的样式；较小div的 s 不需要display或float指定，img也不需要display指定。

于 2013-02-13T00:26:19.887 回答