位置格箱

Question

如果我有3個事業部盒（任意數量真的）下令在下面的莊園：

<div> 
    <div id="one"></div> 
    <div id="two"></div> 
    <div id="three"></div> 
</div> 

我怎樣才能讓id爲one股利後的顯示與ID爲three div而不改變html的結構？

這就是HTML應顯示爲：

________________________ 
| ____________________ | 
| | id=two   | | 
| |     | | 
| |__________________| | 
| ____________________ | 
| | id=three   | | 
| |     | | 
| |__________________| | 
| ____________________ | 
| | id=one   | | 
| |     | | 
| |__________________| | 
|______________________| 

Answer 1

這可能取決於這些div後面的內容。如果什麼都沒有，你可以使用position: absolute; top: 100%;第一div來實現這一目標：

<div id="container"> 
    <div id="one"></div> 
    <div id="two"></div> 
    <div id="three"></div> 
</div>​​​ 

​#container { position: relative; border: 1px solid red; } 
#one { position: absolute; top: 100%; } 
#one, #two, #three { width: 300px; height: 200px; border: 1px solid #ccc; } 

http://jsfiddle.net/xjnrE/

但是，如果#container格之後有什麼事，這將是#one下（至少部分取決於高度;參見demo）。請注意，如果元素是「在流中」（即，它未定位且未浮動），則將根據標記（以及因此DOM）上的外觀順序來渲染元素。這意味着你必須訴諸JavaScript來更改DOM元素的實際位置：

var container = document.getElementById('container'); 
var one = document.getElementById('one'); 
container.appendChild(one); 

http://jsfiddle.net/xjnrE/3/

Answer 2

如果你控制的div的尺寸，並確保他們的內容不會破壞你的佈局，你可以將它們與CSS定位。有點尷尬，但有點像：

#one, #two, #three { 
    position: absolute; 
    width: 200px; 
    height: 200px; 
} 
#one { 
    top: 400px; 
} 
#two { 
    top: 0px; 
} 
#three { 
    top: 200px; 
} 

這些職位然後可以用JavaScript來改變，如果你需要的話。

Answer 3

下搶到第一DIV和移動它是在父容器中的最後一項。

但是，您需要確保您可以以某種方式定位容器DIV。因此，如果您無法編輯HTML，請根據其他具有唯一ID或類的父元素來定位該元素。

標記：

<div id="container"> 
    <div id="one"></div> 
    <div id="two"></div> 
    <div id="three"></div> 
</div> 

的JavaScript：

$('#container #one').appendTo('#container');