如何更改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中的元素顯示順序？

回答

相關問題