如何均勻分佈（水平和垂直）浮動DIVS彼此？

因此，這裏是我目前的困境，我想要在這裏實現是這樣的：如何均勻分佈（水平和垂直）浮動DIVS彼此？

就請忽略每個盒/分隔的所有內容。請注意6個盒子完美均勻地浮在一起。這就是我想要複製的。

所以，我有我自己的代碼：

HTML

<div class="tentofifteen"> 
    <section class="grid-superloop-ten" id="wired-superloop"> 
    </section> 

    <section class="grid-superloop-eleven" id="wired-superloop"> 
    </section> 

    <section class="grid-superloop-twelve" id="wired-superloop"> 
    </section> 

    <section class="grid-superloop-thirteen" id="wired-superloop"> 
    </section> 

    <section class="grid-superloop-fourteen" id="wired-superloop"> 
    </section> 
</div>

CSS

<style> 


.tentofifteen { 
    height: auto; 
    text-align: justify; 
    -ms-text-justify: distribute-all-lines; 
    text-justify: distribute-all-lines; 
} 
#wired-superloop { 
    vertical-align: top; 
    display: inline-block; 
    *display: inline; 
    zoom: 1 
} 
.tentofifteen:after { 
    content:""; 
    width: 100%; 
    display: inline-block; 
    font-size: 0; 
    line-height: 0 
} 

.grid-superloop-ten {width:319px; min-height:700px;background:#CCC;} 
.grid-superloop-eleven {width:220px; min-height:350px; background:#009;} 
.grid-superloop-twelve {width:437px; min-height:350px; background:#F36;} 
.grid-superloop-thirteen {width:337px; min-height:350px; background:#CC9;} 
.grid-superloop-fourteen {width:319px; min-height:350px; background:#0F0;} 





     </style>

現在，這樣的結果是不是真的成功。我不知道如何弄清浮動最後兩個div。

這裏的屏幕截圖。

任何想法有什麼錯的代碼？你能幫忙解決這個問題嗎？

來源

2015-11-12 Ben Daggers

使用Flexbox的，不浮動。 –

許多人因爲完成這項工作而背叛了自己。你基本上正在尋找一個「石工網格」。 JS庫「磚石」就是一個例子。對於一個純粹的CSS版本，我建議看看這個：[三個超級簡單的方法來取消砌體佈局]（http://designshack.net/articles/css/masonry/）。第三種解決方案是純CSS。您將瞭解到要完成它並且需要使用** @ media queries **很難。 Google for'like masonry without JS'，你會得到大量的例子來選擇... –

是的，我同意。我決定使用砌體而不是純粹的CSS。 :) –

嘗試磚石https://jsfiddle.net/2Lzo9vfc/66/

$('.tentofifteen').masonry({ 
    // options 
    itemSelector: '.grid-item', 
    columnWidth: 1 
});

HTML

<div class="tentofifteen"> 
    <section class="grid-superloop-ten grid-item" id="wired-superloop"> 
    </section> 

    <section class="grid-superloop-eleven grid-item" id="wired-superloop"> 
    </section> 

    <section class="grid-superloop-twelve grid-item" id="wired-superloop"> 
    </section> 

    <section class="grid-superloop-thirteen grid-item" id="wired-superloop"> 
    </section> 

    <section class="grid-superloop-fourteen grid-item" id="wired-superloop"> 
    </section> 
</div>

來源

2015-11-12 12:31:57

嗨@Nenad！感謝您的回答。我曾考慮過使用它，但想知道這是否可以純粹用CSS來完成？ –

我想作爲Madara Uchiha說使用flexbox，但我沒有太多的經驗，所以我不能建議它。但由於你的元素寬度是固定的，我認爲砌體是最好的解決方案，但我可能在這裏是錯誤的。 –

夥計。謝謝你的幫助！我決定用磚石來克服這個問題。 :) –

如何均勻分佈（水平和垂直）浮動DIVS彼此？

回答

相關問題