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

我有几个固定类名的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>

我想将所有类型-a和类型-b div分组并在type-c div前面显示它们(可以通过浮动类型a-amp; type-b到右边,type-c到左边) .同样在type-a和type-b之间我想首先显示type-a div.然后键入-b秒.

如果不重新安排上面的HTML或使用JavaScript,我试图得到这个输出：

[type-a] [type-a] [type-b] [type-b] [type-b] [type-c] [type-c] [type-c]

这只能用CSS吗？

这是fiddle,div左右浮动.现在需要发生的排序是在type-a和type-b之间.

解决方法

您可以使用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>

原文地址：https://www.jb51.cc/html/227646.html