如何將頂部和底部的列之間的相同邊距放在頂部和底部，如果這些列具有不同的高度

Question

我有這個，我想要一個像紅色指示的空間。 我使用引導程序。

myTable

編輯：我想是這樣的example，總是有柱的頂部和底部高度無關的其他列相同幅度，因爲所有列的照片或描述的不同高度的原因。

Answer 1

我懷疑是否可以通過CSS。檢出這個javaScript插件，它完全符合你的需求。 JavaScript Masonry

Answer 2

這有點粗糙，很難解釋。我在JSFiddle here中完成了它。

CSS

.container { 
    column-width: 100px; 
    column-gap: 5px; 
    border: 1px solid red; 
    margin: 5px auto; 
} 

#card { 
    padding: 10px 5px; 
    border: 1px solid black; 
    display: inline-block; 
    vertical-align: top; 
    column-break-inside: avoid; 
    background: white; 
    margin: 0 2px 15px; 
} 

HTML

<div class="container"> 
    <div id="card"> 
     <img src="http://ecx.images-amazon.com/images/I/519zImiZraL._SL500_AC_SS100_.jpg"> 
    </div> 

    <div id="card"> 
     <img src="http://saigonexpres.com/wp-content/uploads/2016/06/Nokia-Asha-303-newshitechdigital-e1466994250562-100x75.png"> 
    </div> 

    <div id="card"> 
     <img src="http://linlona.com/wp-content/uploads/2016/08/samsung-a3-100x150.jpg"> 
    </div> 

    <div id="card"> 
     <img src="https://images-na.ssl-images-amazon.com/images/I/51wtdOTMfoL._SL500_AC_SS100_.jpg"> 
    </div> 

    <div id="card"> 
     <img src="http://www.hellkom.co.za/cellphones/images/small/samsung-galaxy-note-4-1.jpg"> 
    </div> 

    <div id="card"> 
     <img src="http://www.price-hunt.com/content/images/accessories/mta-back-replacement-cover-for-lenovo-k-3-note.jpeg"> 
    </div> 

    <div id="card"> 
     <img src="https://images-na.ssl-images-amazon.com/images/I/41qDcWYD6-L._SL500_AC_SS100_.jpg"> 
    </div> 

    <div id="card"> 
     <img src="http://www.mobile2u.com.pk/Images/Items/thumb/nokia_1112_image9034.bmp"> 
    </div> 
</div> 

我可以告訴你的是，關鍵是在列寬，列隙，最重要的是，你需要確保您將卡片的邊距設置爲0，以便它們儘可能地漂浮在頂部。你可以玩弄不同的結果。祝你好運。