Question

如果我在以下庄园中订购了3个Div箱（确实是任何号码）：

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

如何在ID为one的div之后显示标识为three的div，而不更改html的结构？

这就是html应该显示为：

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

Answer 1

这可能取决于那些div之后的内容。如果没有任何内容，您可以在第一个div上使用position: absolute; top: 100%;来实现：

<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 div之后有任何内容，则会在#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');

Answer 4

FTR：flexbox支持从那时起已经成熟，提供了clean solution。

＆＃13;

/* That's all: */
#container { display: flex; flex-direction: column; /* omit the latter for horiz. stacking */ }
#one { order: 99999; /* Alas, no "last"... */ }

/* Demo visuals only: */
#one { background: pink; }
#container > div { width: 100px; height: 100px; border: 1px solid grey; }

＆＃13;

<div id="container">
    <div id="one"> FIRST </div>
    <div id="two"> second </div>
    <div id="three"> third </div>
</div>

＆＃13;

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

4 个答案: