Question

这就是我所拥有的：

<div class="container>
    <div class="parent1"></div>
    <div class="parent2">
         <div class="child1"></div>
         <div class="child2"></div>
    </div>
</div>

这就是我想要的：

<div class="container>
    <div class="parent2">
         <div class="child1"></div>
              <div class="parent1"></div>
         <div class="child2"></div>
    </div>
</div>

仅CSS或JavaScript（而不是jQuery）有可能吗？即使HTML不会移动，只要它们按顺序出现在页面上也可以。

Answer 1

要执行此操作，我建议您删除子类周围的div.parent2。因此，代码变为

<div class="container parent">
 <div clas="parent1"></div>
 <div class="child1"></div>
 <div class="child2></div>
</div>

然后您可以使用flexbox做到这一点

.parent{display: flex};
.child1{order:1}
.parent1{order:2}

Answer 2

您可以使用Javascript来实现："config": { "nuxt": { "host": "0.0.0.0", "port": "3333" } }, "scripts": { "dev": "nuxt" }
演示：

document.querySelector('.child1').appendChild(document.querySelector('.parent1'));

function reorder() {
  document.querySelector('.child1').appendChild(document.querySelector('.parent1'));
}

.container * {
  display: block;
  border: 2px solid lightgrey;
  color: lightgrey;
  padding: 5px;
  margin: 15px;
}
.parent1 {
  color: red;
  border-color: red;
}
.child1 {
  color: blue;
  border-color: blue;
}

注意：CSS仅用于更好的外观

Answer 3

使用JavaScript：

//Remove the parent 1 div from the container div
 document.getElementsByClassName('container')[0].removeChild(document.getElementsByClassName('parent1')[0]);

//Insert into div between children
const parent2 = document.getElementsByClassName('parent2')[0];
let divEle = document.createElement('div');
divEle.className = 'parent1';
parent2.insertBefore(divEle, parent2.querySelector('.child2'));

用CSS重新排序div？在父母2的孩子之间插入父母1

3 个答案: