时间戳

首页 > 解决方案 > 如何将第一个孩子移动到父母的底部，在最后一个孩子之下？

html - 如何将第一个孩子移动到父母的底部，在最后一个孩子之下？

问题描述

我需要移动到第一个 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>

标签： htmlcss

解决方案

通过@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);
}

代码笔： https ://codepen.io/nitinsuri/pen/djrpyo

推荐阅读