列の高さが異なる場合、上下の列間に同じマージンを設定する方法

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に設定して、可能な限り上に浮かべます。さまざまな結果が得られます。がんばろう。