排序的div

我在整理股利（或多個）的一個問題，我有兩種類型a, b排序的div

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/

我會怎樣去解決這個問題？

來源

2013-03-28 Kivylius

我不明白你想要做什麼。 – woz

@woz更新的答案，也許你現在可以理解 – Kivylius

如果您正在尋找純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; 
}

瀏覽器支持：鉻，歌劇，IE10。 http://caniuse.com/#feat=flexbox

來源

2013-03-29 00:10:53 cimmanon

這是一個超酷的解決方案。無聊的瀏覽器支持並不是更好 – Brad

如果你不需要你的元素來包裝，你可以擴展瀏覽器對Firefox和Safari的支持：http://codepen.io/cimmanon/pen/htJqA – cimmanon

不相信只有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）。如果您需要支持舊瀏覽器，則必須執行此類操作（這絕對不會太酷）

來源

2013-03-29 00:07:01 Brad

回答

相關問題