css - 仅使用 CSS 以网格格式对 div 进行排序

标签 css html

我在对 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; }

这似乎在一行中工作得很好:

works fine as line

但打破了网格:

problme

期望的结果(框的数量无关紧要):

result

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

我该如何解决这个问题?

最佳答案

如果您正在寻找纯 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

关于css - 仅使用 CSS 以网格格式对 div 进行排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15694183/

相关文章:

javascript - Onsubmit window.location 不工作

html - 将内容放在 block 中

javascript - 防止移动用户下载桌面轮播图片

javascript - 下拉在 ie8 和 ie9 中不起作用

html - FF 显示不需要的边框

html - 如何将具有最大高度的元素与垂直中心对齐?

html - 在 scss 中使用标记名和父类名称的目标子类,并在其后附加 BEM 命名

javascript - PHP next($array) 和 Javascript

css - Django:Firefox 不使用加载的 CSS

css - 如何仅在左侧和右侧从 div 中制作阴影渐变?