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

您可以使用grid元素的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，且订单值越低，网格项目显示的越高。我建议您为元素使用不同的选择器（向它们添加类）。

用CSS重新排列/交织元素

1 个答案: