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