在Skeleton Framework中更改行之间的空格。

Question

现在我有两个div使用＆＃34;一半列＆＃34;类。

正如您在此处所见，左侧的底部卡片仍然与右下角的卡片对齐。

我想要像这样的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 =＆＃39; cards＆＃39;如果你想使用砌体，你必须将每张卡放在同一个div中，所以在这种情况下，在同一行内。

然后你可以称之为

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

由于砖石是响应性的，你可以忘记这部分的骨架。