html - polymer 1.0 中的砌体

Question

所以我有一个名为 my-element 的自定义元素，在该元素中我有一个重复模板，它显示一堆名为 my-card 的自定义元素。所以我使用 inline-block 将卡片分成两列，这很有效，但由于卡片的高度不同，中间有一些难看的空白。根据用户在 stackoverflow 上的建议，我使用 column-count 来使其工作。从视觉上看，它有效，但右栏中的 my-card 不是交互式的。

如果我将鼠标悬停在第一列下方，我可以单击应该位于第二列中的 my-card。 尽管它没有在上图中显示，但 my-card 的高度不同，所以我需要一个砖石布局。移动屏幕宽度为一列，平板电脑+为两列。我怎样才能做到这一点？

这是代码:http://pastebin.com/NFv6ed2T

Answer 1

我没有看到任何重复或任何东西，但为什么不更改您的代码以使用水平和垂直布局？删除除此之外的所有多余样式。

还有 <section>标签可能不是必需的。 假设你在某处包含了 iron-flex-layout 代码...... 具有简单样式的工作代码:http://jsbin.com/cetece/1/edit?html,output

<template id="app" is="dom-bind">
  <paper-material class="card">
  <div class="vertical layout">
    <div class="horizontal layout row">
        <paper-button raised class="button" data-dialog="loans">Student Loans</paper-button>
        <paper-button raised class="button" data-dialog="wage">Minimum Wage</paper-button>
    </div>
    <div class="horizontal layout row">
        <paper-button raised class="button" data-dialog="racism">Racism</paper-button>
        <paper-button raised class="button" data-dialog="climate">Climate Change</paper-button>
    </div>
    <div class="horizontal layout row">
        <paper-button raised class="button" data-dialog="privacy">Internet Privacy</paper-button>
        <div class="button" >&nbsp;</div>
    </div>
  </div>
  </paper-material>
</template>

这是一个示例，如果您需要将按钮换成一行，如果容器对于 2 行来说太小:http://jsbin.com/cetece/2/edit?html,output

为行添加包装类并调整固定按钮大小和非固定包装容器的样式。

<template id="app" is="dom-bind">
  <paper-material class="card">
  <div class="vertical layout">
    <div class="horizontal layout row wrap">
        <paper-button raised class="button" data-dialog="loans">Student Loans</paper-button>
        <paper-button raised class="button" data-dialog="wage">Minimum Wage</paper-button>
    </div>
    <div class="horizontal layout row wrap">
        <paper-button raised class="button" data-dialog="racism">Racism</paper-button>
        <paper-button raised class="button" data-dialog="climate">Climate Change</paper-button>
    </div>
    <div class="horizontal layout row wrap">
        <paper-button raised class="button" data-dialog="privacy">Internet Privacy</paper-button>
        <div class="button" >&nbsp;</div>
    </div>
  </div>
  </paper-material>
</template>

如果您需要按钮全部水平对齐，则只需移除所有行容器和垂直布局容器，并将所有纸质按钮放在一个容器中，例如纸质 Material .