對齊div取決於可用空間

我有div對齊如下所示。我不需要正式的表格式佈局。我需要DIV5使用DIV2下面的空格（標記爲紅色）。我使用Bootstrap框架，我需要一個通用的解決方案，以便無論我使用那個，div元素都將適當地對齊。對齊div取決於可用空間

enter image description here

請幫助。提前致謝。

來源

2014-02-05 Raja Asthana

你的意思是類似Pinterest的佈局？ – Fraggy

[jQuery Masonry]（http://masonry.desandro.com/）可以幫助你。 – kapa

@Fraggy是的。與此類似。 –

Twitter引導程序的網格系統不是流體，級聯或任何你想稱之爲的東西。我假設你在那裏有兩個'.row'div的列，而那些行只接受12行，就是這樣 - 行不會重疊。

你應該嘗試使用像砌體（http://masonry.desandro.com/），有或沒有引導。使用bootstrap，你可以在行> col-lg-12內部創建砌體網格，像這樣

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-12"> 
      Masonry grid plugin here. 
     </div> 
    </div> 
</div>

來源

2014-02-05 11:37:23 mMoovs

我試過砌體，但是當我加載頁面時它不工作。當我調整瀏覽器的大小時，它工作正常。我正在使用HTML進行初始化，如http://masonry.desandro.com/ –

中提到的那樣是否加載了砌體代碼？你嘗試用JavaScript初始化嗎？ – mMoovs

是的。我嘗試使用JQuery初始化，但面臨相同的問題 –

我遇到過類似的問題。馬賽克流程很方便，可以通過簡單的步驟加入。

http://jquery-plugins.net/mosaic-flow-pinterest-like-responsive-image-grid

<div class="mosaicflow__item"> ....just include all <img> inside this DIV </div> ....包括插件 <script src="../lib/mosaicflow/jquery.mosaicflow.min.js"></script>

來源

2014-02-05 12:06:34

對齊div取決於可用空間

回答

相關問題