Question

因此，我正在开发一款具有各种带有图像的材料设计精简卡的应用程序，以使这些卡位于砖石网格中。我正在使用masonry模块（https://masonry.desandro.com/）来尝试与mdl-grid一起创建网格，但是额外的空格被添加到每张卡的末尾，例如{{3 }}

我如何使砖石网格成为实际的砖石网格？我希望能够删除此底部空间并将卡片放置在最后一个卡片的下面，而无需考虑该行其他卡片的高度。

我的完整项目可在this上找到，但是相关部分在这里，分别在ejs和CSS中：

index.ejs（由快递加载）的部分

<script src="masonry.pkgd.min.js"></script>
<script>
  let elem = document.querySelector('.masonry-grid');
  let msnry = new Masonry(elem, {
    itemSelector: '.masonry-grid-item'
  });
</script>

<div class="mdl-grid masonry-grid">
  <% files.forEach((bun) => { %>
    <div class="mdl-card mdl-cell mdl-cell--4-col-desktop masonry-grid-item mdl-shadow--2dp">
      <figure class="mdl-card__media">
        <img src=<%= bun.path.replace("public/", "") %> alt="" />
      </figure>
      <div class="mdl-card__title">
        <h3 class="mdl-card__title-text"><%= bun.originalname %></h3>
      </div>
      <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--accent mdl-js-button-mdl-js-ripple-effect" href=<%= bun.path.replace("public/", "") %>>
          View
        </a>
      </div>
    </div>
  <% }); %>
</div>

index.css

.masonry-grid {
    max-width: auto;
}

.masonry-grid:after {
    content: '';
    display: block;
    clear: both;
}

.masonry-grid-item {
    /* width: 160px;
    height: 120px; */
    float: left;
}

.mdl-card {
    height: auto;
}

.mdl-card__media {
    margin: 0;
}

.mdl-card__media > img {
    width: 100%;
    height: auto;
}

尝试使用材料设计lite卡创建砌体网格

0 个答案: