如何反转html中元素的流动

Question

我怎样才能做到这一点<div>   <p>A</p>   <p>B</p>   <p>C</p> </div>我期望的结果C乙A我怎样才能做到这一点？

Answer 1

Use flexbox :

.wrapper{

display :flex;

flex-direction: column-reverse;

}

<div class='wrapper'>

  <p>A</p>

  <p>B</p>

  <p>C</p>

</div>

Answer 2

使用 CSS

您可以通过指定显示来反向排序项目flex。

div {

  display: flex;

  flex-direction: column-reverse;

}

<div>

  <p>A</p>

  <p>B</p>

  <p>C</p>

</div>

或者，您可以通过沿方向轴翻转子元素来转换子元素。翻转整个div，然后p在 div 内翻转每个。虽然这有效，但应该避免使用flex. 注意：转换元素后，选择会变得非常不稳定。

div, p {

  transform: scale(1, -1);

}

<div>

  <p>A</p>

  <p>B</p>

  <p>C</p>

</div>

使用 JavaScript

您也可以在 JavaScript 中使用一个函数来执行此操作，该函数遍历节点childNodes并将它们插入到第一个子节点之前。

/**

 * @describe Reverses the child nodes of a node in-place.

 * @param {Node} node - The parent of the child nodes to be reversed

 */

const reverseChildNodes = node => {

  for (let i = 1; i < node.childNodes.length; i++) {

    node.insertBefore(node.childNodes[i], node.firstChild);

  }

}

if (Element.prototype.reverseChildren === undefined) {

  Element.prototype.reverseChildren = function() {

    reverseChildNodes(this);

  };

}

// Global function

reverseChildNodes(document.querySelector('.section:first-child'));

// Prototype method on Node object

[...document.querySelectorAll('.section')].pop().reverseChildren();

.section { border: thin solid grey; margin: 0.25em; padding: 0.25em; }

<div class="section">

  <p>A</p>

  <p>B</p>

  <p>C</p>

</div>

<div class="section">

  <p>A</p>

  <p>B</p>

  <p>C</p>

</div>