如何将顶部和底部的列之间的相同边距放在顶部和底部，如果这些列具有不同的高度

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，以便它们尽可能地漂浮在顶部。你可以玩弄不同的结果。祝你好运。