如何反转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'>&nbsp; <p>A</p>&nbsp; <p>B</p>&nbsp; <p>C</p></div>

Answer 2

使用 CSS您可以通过指定显示来反向排序项目flex。div {&nbsp; display: flex;&nbsp; flex-direction: column-reverse;}<div>&nbsp; <p>A</p>&nbsp; <p>B</p>&nbsp; <p>C</p></div>或者，您可以通过沿方向轴翻转子元素来转换子元素。翻转整个div，然后p在 div 内翻转每个。虽然这有效，但应该避免使用flex. 注意：转换元素后，选择会变得非常不稳定。div, p {&nbsp; transform: scale(1, -1);}<div>&nbsp; <p>A</p>&nbsp; <p>B</p>&nbsp; <p>C</p></div>使用 JavaScript您也可以在 JavaScript 中使用一个函数来执行此操作，该函数遍历节点childNodes并将它们插入到第一个子节点之前。/**&nbsp;* @describe Reverses the child nodes of a node in-place.&nbsp;* @param {Node} node - The parent of the child nodes to be reversed&nbsp;*/const reverseChildNodes = node => {&nbsp; for (let i = 1; i < node.childNodes.length; i++) {&nbsp; &nbsp; node.insertBefore(node.childNodes[i], node.firstChild);&nbsp; }}if (Element.prototype.reverseChildren === undefined) {&nbsp; Element.prototype.reverseChildren = function() {&nbsp; &nbsp; reverseChildNodes(this);&nbsp; };}// Global functionreverseChildNodes(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">&nbsp; <p>A</p>&nbsp; <p>B</p>&nbsp; <p>C</p></div><div class="section">&nbsp; <p>A</p>&nbsp; <p>B</p>&nbsp; <p>C</p></div>