スケルトンフレームワークの行間のスペースが変更されます。

Question

今私は "半分の列"クラスを使って2つのdivを持っています。

ご覧のとおり、左側のボトムカードは、右下のボトムカードと同じ位置にあります。

私はこのようなスタイルのPinterestを欲しがっていますが、それらは異なる行にあるためにどのようにか分かりません。

ここに私のhtmlコードです。事前に

<div class="container"> 
<div class="row"> 
    <div id="cards" class="one-half column" style="margin-top: 25%"> 
    <img class="card-image" src="img/sample.png"> 
    <div class="title"> 
    <h4>Stealth Rats</h4> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit eu nibh vitae maximus.</p> 
    </div> 
    </div> 
    <div id="cards" class="one-half column" style="margin-top: 25%"> 
    <img class="card-image" src="img/sample.png"> 
    <div class="title"> 
    <h4>Basic Page</h4> 
    <p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the <a href="http://www.getskeleton.com">Skeleton documentation</a>.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit eu nibh vitae maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a mollis arcu.</p> 
    </div> 
    </div> 
</div> 

<div class="row"> 
    <div id="cards" class="one-half column" style="margin-top: 5%"> 
    <img class="card-image" src="img/sample.png"> 
    <h4>Basic Page</h4> 
    <p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the <a href="http://www.getskeleton.com">Skeleton documentation</a>.</p> 
    </div> 
    <div id="cards" class="one-half column" style="margin-top: 5%"> 
    <img class="card-image" src="img/sample.png"> 
    <h4>Basic Page</h4> 
    <p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the <a href="http://www.getskeleton.com">Skeleton documentation</a>.</p> 
    </div> 

ありがとう！

Answer 1

行の代わりに列を操作する（そして内容が重要になる）場合を除き、プレーンなCSSで行うことはできません。

ほしいものはMasonryまたは別のjavascriptの代替です。

また、HTMLにエラーがあります。同じIDを複数回使用することはできません。それをclass = 'cards'に変更し、石積みを使用する場合は、すべてのカードを同じdiv内に配置する必要があります。この場合、同じ行の内側に配置します。

次に、あなたは石工が応答するので、あなたはこの部分のスケルトン忘れることができ

$('.row').masonry({ 
    itemSelector: '.cards', 
    columnWidth: 200 //this is an example. 
}); 

それを呼び出すことができます。