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

Question

现在我有两个使用“半列”类的 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.
});

由于砌体是响应式的，因此您可以忘记这部分的骨架。