html - 在 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.
});

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