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

我有一个像

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

我怎样才能解决这个问题？非常感谢！

来源

2013-02-13 FlyingCat

想到浮动元素，因为他们推动到一个堆栈。如果你想的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-13 00:15:28 deadlock

我的问题是，我不能推倒这些div倒序，因为所有的图像都是从数据库构建而来，并且divs会以相同的顺序附加到每个图像上。我希望如果有这个问题的快速css修复。 +1虽然。 – FlyingCat 2013-02-13 00:23:49

@FlyingCat我认为他们没有直接的CSS黑客做到这一点。你最好的选择是将所有的div都包含到“float：right”容器中，并使div“float：left” – deadlock 2013-02-13 00:28:54

我不确定展示位置/用户互动是否理想，但是如果您确实需要img个S布置在左侧和顺序，并安排在右侧，以便在div小号...

把div S IN一个div容器和风格它float: right。

你不应该需要任何额外的样式;较小的div s不需要指定display或float，并且img不需要指定display。

来源

2013-02-13 00:26:19

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

回答

相关问题