保持縮略圖預覽行均勻分佈

我使用Bootstrap和jQuery作爲Web管理後端的核心基礎。我添加了一個可在BS Modal中打開的「媒體上傳器」，該模式工作正常，但由於圖像是上傳的（使用dropzone.js一個接一個地上傳），它們被添加到主預覽區域中，並預先添加到現有圖像中。保持縮略圖預覽行均勻分佈

發生這種情況時，如果圖像是不盡相同的高度，我得到以下結果：

Misaligned image thumbnails

我知道原因是什麼，我只是想知道如果有一個簡單解決這個問題的方法。這裏是標記的使每縮略圖框：

<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2 media-col"> 
    <div class="box media-box"> 
     <div class="box-body table-responsive"> 
      <img src="SOME IMAGE"> 
      <input type="text" class="form-control" readonly="true" value="SOME IMAGE URL"> 
     </div><!-- /.box-body --> 
    </div><!-- /.box --> 
</div>

所有圖片均爲單<div class="row"></div>

我的主要問題的內部圖像縮略圖的響應。我無法爲每個X＃圖像創建一個包裝，因爲每行顯示的圖像數量會根據屏幕分辨率而改變。

來源

2015-03-31 matcartmill

如果你有這樣做的可能性，你可以把'明確：left'落入第二行的元素。這將清除它的前輩兄弟姐妹，可能會導致佈局問題。當你的佈局是響應式的，你不知道哪個元素將開始新行時，這當然很難做到。如果'display：table'和'display：table-cell'而不是Bootstrap的網格材質會切斷它，我就去試試看。那麼你當然會錯過所有的響應式的東西。 – maryisdead 2015-03-31 12:24:41

這個問題是浮動在CSS中工作的奇怪效果。如果你理解它，這是有道理的，但如果你不明白就會顯得很奇怪。

我建議將主塊設置爲display:inline-block而不是float:left。然後，他們將自動「行」本身，無論屏幕寬度，像這樣：

http://codepen.io/EightArmsHQ/pen/zxXOWX

另一種選擇是使用像磚石，這將absolute LY（和穩健）的位置中的所有元素一個不錯的方法。

http://masonry.desandro.com/

來源

2015-03-31 12:21:41 Djave

那種工作。在很短的圖像上它仍然破碎。我最終做的是使用無序列表。我將圖像的高度設置爲130px，並將「overflow：hidden」添加到圖像容器。這給整個行提供了統一的外觀。我可以用我最後一種方法做類似的事情，但'

'更簡單。不過，非常感謝您的回答。 – matcartmill 2015-04-01 01:13:41

保持縮略圖預覽行均勻分佈

回答

相關問題