我可以按类名控制HTML元素的顺序吗？

Question

我有几个固定类名的div：

<div class="type-a"></div>
<div class="type-b"></div>
<div class="type-c"></div>

这些可能有多个，这些div并不总是有序。它们是动态添加的。

<div class="type-a"></div>
<div class="type-b"></div>
<div class="type-c"></div>
<div class="type-c"></div>
<div class="type-b"></div>
<div class="type-b"></div>
<div class="type-c"></div>
<div class="type-a"></div>

我想对所有type-a和type-b div进行分组，并将其显示在type-c div之前（可以通过浮动type-a＆amp; {{1来完成在右侧，type-b在左侧）。同样在type-c和type-a之间，我想首先显示type-b div。并且type-a秒。

如果不重新安排上述HTML或使用JavaScript，我正试图获得此输出：

type-b

这只能用CSS吗？

这是fiddle，其中div左右浮动。现在需要进行的排序介于[type-a] [type-a] [type-b] [type-b] [type-b] [type-c] [type-c] [type-c] 和type-a之间。

Answer 1

您可以使用flexbox和order属性：

.container>div {
  width: 20px;
  height: 20px;
  background-color: yellow;
}

.container {
  display: inline-flex;
}

.type-a {
  order: 1;
}

.type-b {
  order: 2;
}

.type-c {
  order: 3;
}

<div class="container">
  <div class="type-a">A</div>
  <div class="type-b">B</div>
  <div class="type-c">C</div>
  <div class="type-c">C</div>
  <div class="type-b">B</div>
  <div class="type-b">B</div>
  <div class="type-c">C</div>
  <div class="type-a">A</div>
</div>

订单也适用于Grid：

.container>div {
  background-color: yellow;
}

.type-a {
  order: 1;
}

.type-b {
  order: 2;
}

.type-c {
  order: 3;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 20px);
  
}

<div class="container">
  <div class="type-a">A</div>
  <div class="type-b">B</div>
  <div class="type-c">C</div>
  <div class="type-c">C</div>
  <div class="type-b">B</div>
  <div class="type-b">B</div>
  <div class="type-c">C</div>
  <div class="type-a">A</div>
</div>

Answer 2

使用flex显示：

.container {
display:flex;
flex-flow:column;
}

.type-a {
order:1;
}

.type-b {
order:2;
}

.type-c {
order:3;
}

<div class="container">
<div class="type-a">a</div>
<div class="type-b">b</div>
<div class="type-c">c</div>
<div class="type-c">c</div>
<div class="type-b">b</div>
<div class="type-b">b</div>
<div class="type-c">c</div>
<div class="type-a">a</div>
</div>