如何将第一个子项移动到父项的底部，最后一个子项下？

Question

我需要移动到第一个div (id=" div -1")到最后一个div (id="div-4")下的父div (id="content")的底部

但是第一个div移到最后一个div上

​

​

我需要它成为

​

​

​

#content {
  position: relative;
}

#div-1 {
  position: absolute;
  bottom: 0;
}

<div id="content">
  <p>id="container"</p>
  <div id="div-1">
    <p>id="div-1"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-2">
    <p>id="div-2"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-3">
    <p>id="div-3"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-4">
    <p>id="div-4"</p>
    <p>This is a sample paragraph.</p>
  </div>
</div>

​

Answer 1

将transform: translateY(100%);添加到第一个div。

​

#content {
  position: relative;
}

#div-1 {
  position: absolute;
  bottom: 0;
  transform: translateY(100%);
}

<div id="content">
  <p>id="container"</p>
  <div id="div-1">
    <p>id="div-1"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-2">
    <p>id="div-2"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-3">
    <p>id="div-3"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-4">
    <p>id="div-4"</p>
    <p>This is a sample paragraph.</p>
  </div>
</div>

​

Answer 2

如果您可以使用flexbox，那么由于order属性，这就是您想要实现的非常简单的功能：

​

#content {
  display: flex;
  flex-direction: column;
}

#div-1 {
  order: 1;
}

<div id="content">
  <p>id="container"</p>
  <div id="div-1">
    <p>id="div-1"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-2">
    <p>id="div-2"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-3">
    <p>id="div-3"</p>
    <p>This is a sample paragraph.</p>
  </div>
  <div id="div-4">
    <p>id="div-4"</p>
    <p>This is a sample paragraph.</p>
  </div>
</div>

​

Answer 3

在@sujeith (https://stackoverflow.com/a/51811892/2024411)的解决方案上即兴发挥我已经创建了这个函数，这样你就可以旋转所有从顶部推到列表末尾的项目。

function moveDiv() {
    var fragment = document.createDocumentFragment(),
        allChildDivs = document.querySelector("#content").children;
    fragment.appendChild(allChildDivs[0]);
    document.querySelector("#content").appendChild(fragment);
}

CodePen：https://codepen.io/nitinsuri/pen/djrpyo