適用於差距的CSS div

我正在嘗試使響應具有不同高度和寬度的框。問題是（正如你在圖中看到的那樣）是他們不會進入縫隙並填充剩餘的空間。任何人都有一個想法是什麼導致這個問題，什麼可以解決這個問題？適用於差距的CSS div

 <section class="blokContentContainer"> 
      <div class="blok-25"> 
      </div> 
      <div class="blok-25"> 
      </div> 
      <div class="blok-50"> 
      </div> 
      <div class="blok-50"> 
      </div> 
      <div class="blok-25"> 
      </div> 
      <div class="blok-25"> 
      </div> 
     </section> 

.blokContentContainer div{ 
     float: left; 
     display: inline-block; 
     border: 2px solid white; 
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
     -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
     box-sizing: border-box; 
     background-color: #B2DFDB; 
    } 
    .blok-25{ 
     width: 25%; 
     height: 300px; 
    } 
    .blok-50{ 
     width: 50%; 
     height: 500px; 
    } 
    .blokContentContainer{ 
     height: 100%; 
     width:98%; 
     margin-left:1%; 
    }

來源

2015-10-16 Vince Verhoeven

這是瀏覽器中'Float'元素的默認行爲。您需要使用像http://masonry.desandro.com/這樣的庫來實現此效果。 –

你應該使用石匠 - http://w3bits.com/css-masonry/ –

如果你可以使用固定寬度/高度（即不百分比），然後CSS3列可以幫助你。

訣竅是使用組合columns與適當的float清除。 clear:left你的大div s，以便較小的可以並排，但更大的爆發。下面是一個例子：

演示小提琴：http://jsfiddle.net/v8sjnfre/2/

演示片段：

* { box-sizing: border-box; margin: 0; padding: 0; } 
 
html, body { width: 100%; } 
 
.blokContentContainer { 
 
    width: 400px; margin: 12px; 
 
    -webkit-column-count: 2; column-count: 2; 
 
    -webkit-column-gap: 0px; column-gap: 0px; 
 
} 
 
.blokContentContainer div { 
 
    display: block; 
 
    background-color: #B2DFDB; 
 
    border: 1px solid #fff; 
 
    -webkit-column-break-inside: avoid; 
 
} 
 
.blok-25 { width: 100px; height: 100px; float: left; } 
 
.blok-50 { width: 200px; height: 200px; clear: left; }

<section class="blokContentContainer"> 
 
    <div class="blok-25"></div> 
 
    <div class="blok-25"></div> 
 
    <div class="blok-50"></div> 
 
    <div class="blok-50"></div> 
 
    <div class="blok-25"></div> 
 
    <div class="blok-25"></div> 
 
</section>

爲列中的瀏覽器的支持是非常好的（IE> 9），結合廠商前綴。看到這裏 - http://caniuse.com/#feat=multicolumn

來源

2015-10-16 13:12:12 Abhitalks

謝謝，你知道瀏覽器的支持嗎？ –

@VinceVerhoeven：瀏覽器支持非常好（IE> 9），並結合了廠商前綴。看到這裏 - http://caniuse.com/#feat=multicolumn – Abhitalks