0

div の並べ替えに問題があります。2 つのタイプがあります。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/

この問題を解決するにはどうすればよいですか?

4

2 に答える 2

6

純粋な 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

于 2013-03-29T00:10:53.143 に答える
2

CSS と HTML だけでこれが可能だとは思わないでください。私のお勧めは、CSS を変更せずに a と b を並べ替えてから、並べ替えた新しい順序で 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に感謝します)。古いブラウザーをサポートする必要がある場合は、次のようなことを行う必要があります (これは明らかにクールではありません)。

于 2013-03-29T00:07:01.657 に答える