将 div 框放在后面的元素的末尾答案

【问题标题】：Position div box at the end of after ensuing elements将 div 框放在后面的元素的末尾
【发布时间】：2012-08-18 10:34:51
【问题描述】：

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

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

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

这是 html 应该显示的内容：

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

【问题讨论】：

有点矛盾。你想让 div two 仍然可见吗？如果不是，那么 div 两个很容易写这个#two {display:none}
这会出现在什么可能的用例中？
@Lokase 对此的解决方案：stackoverflow.com/questions/12082481/…
太糟糕了，没有 float:bottom 或 sink:bottom 而不是
@Lowkase，或在别处生成的内容的自定义样式（根据用户偏好重新排序项目）。

标签： css html position

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

以下抓取第一个 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');

【讨论】：

好吧，这个问题的重点是当表单中存在多个提交按钮并按下输入时，#one 中的提交仍然是输入时“单击”的按钮被按下并且稍后存在更多提交按钮？
我很确定，如果您按 ENTER 键，无论表单标签中的提交按钮数量如何，它都会提交表单。光标需要在表单内（在字段中或单击标签）。
它将选择表单中的第一个提交按钮，并且如果前面设置了“onclick”属性（尤其是在带有图像选择的wordpress中看到），它将被调用而不是提交表单

【解决方案3】：

这可能取决于这些 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/

【讨论】：

谢谢，它就像一个魅力，容器需要嵌套在另一个容器中，该容器有一点 padding-bottom 使它看起来适合里面

【解决方案4】：

如果您控制 div 的尺寸并确保其内容不会破坏您的布局，您可以使用 css 定位它们。有点尴尬，但类似：

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

如果需要，可以使用 javascript 更改这些位置。

【讨论】：

宽度可控，但高度控制不了
您可以使用javascript获取元素的高度并动态设置css top属性。
会是理想的，但遗憾的是不是我使用它的目的