仅使用CSS对网格格式的div进行排序

Question

我在排序div时遇到问题，我有两种类型a, b

a - should always be at the front (all a types)
b - should be following all a types.

HTML：

<div class="" style="">
    <div class="a">a</div>
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="a">a</div>
</div>

CSS：

.a, .b {
  display:inline-block;
  width:50px;
  height:50px;
  padding:15px;
  margin:5px;
}

.a {
  float:left;
  background-color: blue;
}

.b { background-color: red; }

这似乎在一条线上运作良好：

但作为一个网格打破：

期望的结果（方框数无关）：

JsFiddle：http://jsfiddle.net/kQkn9/

我将如何解决此问题？

Answer 1

如果您正在寻找纯CSS解决方案，您唯一的选择就是使用Flexbox。

http://jsfiddle.net/kQkn9/2/

.container { /* parent element */
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@supports (flex-wrap: wrap) {
  .container {
    display: flex;
  }
}

.a, .b {
  display: inline-block;
  width: 50px;
  height: 50px;
  padding: 15px;
  margin: 5px;
}

.a {
  background-color: blue;
}

.b {
  -webkit-flex-order: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
  background-color: red;
}

浏览器支持：Chrome，Opera，IE10。 http://caniuse.com/#feat=flexbox

Answer 2

不相信仅使用CSS和HTML就可以实现这一点。我的建议是对a和b进行排序，而不是改变你的css，然后按照新的排序顺序将它们重新插入到DOM中。

这个效果:(在JQ中）

var listOfAs = $('.a').clone(); 
var listOfBs = $('.b').clone(); 
var parent = $('.a').first().parent('div'); 
$('.a, .b').remove(); 
parent.append(listOfAs); 
parent.append(listOfBs); 

我知道这是一个麻烦而且没有超级“响应”但是正如我所说的那样，单凭CSS不会认为它是可能的......这只是一个快速而肮脏的实现，可以帮助您入门。

PS：更新了你的小提琴http://jsfiddle.net/kQkn9/6/

编辑：显然这在新的浏览器中是可能的（感谢@cimmanon）。如果你需要支持旧的浏览器，你将不得不做这样的事情（这绝对不那么酷）