我在对 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/
我该如何解决这个问题?
最佳答案
如果您正在寻找纯 CSS 解决方案,唯一的选择是使用 Flexbox。
.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
关于css - 仅使用 CSS 以网格格式对 div 进行排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15694183/