使用 CSS 重新排列/交织元素

Question

有没有办法用 CSS 来“交织”元素？

假设我已经做出反应，生成图像列表和文本列表。

html 看起来像

<div>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
  <p>Paragraph 4</p>
  <p>Paragraph 5</p>
  <img src="image1.jpg" />
  <img src="image2.jpg" />
  <img src="image3.jpg" />
  <img src="image4.jpg" />
  <img src="image5.jpg" />
</div>

我希望它们像这样显示

<div>
  <p>Paragraph 1</p>
  <img src="image1.jpg" />
  <p>Paragraph 2</p>
  <img src="image2.jpg" />
  <img src="image3.jpg" />
  <p>Paragraph 3</p>
  <img src="image4.jpg" />
  <p>Paragraph 4</p>
  <img src="image5.jpg" />
  <p>Paragraph 5</p>
</div>

我觉得它可以在 React 组件中轻松完成，但我想知道是否有一种方法可以使用 CSS 网格或 flex。

Answer 1

您可以使用网格元素的 order 属性来做到这一点。

下面的代码应该可以解决问题：

div { display: grid; }

p:nth-child(1) { order: 1; }
p:nth-child(2) { order: 3; }
p:nth-child(3) { order: 6; }
p:nth-child(4) { order: 8; }
p:nth-child(5) { order: 10; }
img:nth-child(6) { order: 2; }
img:nth-child(7) { order: 4; }
img:nth-child(8) { order: 5; }
img:nth-child(9) { order: 7; }
img:nth-child(10) { order: 9; }

<div>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
  <p>Paragraph 4</p>
  <p>Paragraph 5</p>
  <img src="image1.jpg" />
  <img src="image2.jpg" />
  <img src="image3.jpg" />
  <img src="image4.jpg" />
  <img src="image5.jpg" />
</div>

默认情况下，所有网格项的顺序值为 0，顺序值越低，网格项出现的位置越高。我建议您对元素使用不同的选择器（向它们添加类）。