css - 将 div 框放在后面的元素的末尾

Question

如果我在以下庄园订购了 3 个 Div 框（实际上是任何数量）：

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

如何在不改变 html 结构的情况下让 idone的 div 显示在 id 的 div 之后？three

这就是 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（至少部分地，取决于高度；参见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从那时起支持已经成熟，提供了一个干净的解决方案。

/* 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; }

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