将div框放在后续元素的末尾

Question

如果我在以下庄园中订购了3个Div箱(真正的任何号码):

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

如何在带有id one的div之后显示带有id 的div three而不更改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/

但是,如果在#containerdiv 之后有任何东西,它将在#one(至少部分,取决于高度;见演示).

请记住,如果元素是"在流中"(即,它没有定位而不是浮动),它将根据标记上的外观顺序(以及因此DOM)进行渲染.这意味着您必须使用JavaScript来更改DOM中元素的实际位置:

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

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