Question

聚合物1.1

我有一个自定义元素，我想要一行只有2张纸卡，它们之间有100px的空间。当然，如果屏幕像手机一样缩小，我希望卡片堆叠起来。

我不知道如何在纸卡之间放置空间。如果我执行margin或padding，那么当卡片堆放在较小的屏幕上时，它们会被推到一边而不是居中。

这是一个很大的元素，所以我只放置了主要代码：

<dom-module id="portfolio-page">
  <style>
    :host[show] {
      @apply(--layout-horizontal);
      @apply(--layout-center-justified);
      height: 100%;
      width: 100%;
      background-color: var(--paper-grey-50);
     }
       #main {
      width: 100%;
      margin-top: 50px;
    }

    @media all and (min-width: 1200px) {
      #main {
        width: 90%;
      }

     paper-card {
      max-width: 400px;
      min-width: 250px;
     }


    </style>

  <template>
    <template is="dom-if" if="{{show}}">
      <div id="main">
        <div class="vertical layout">
          <div class="horizontal justified layout">
            <paper-card elevation="3" class="fancy"></paper-card>
            <paper-card elevation="3" class="fancy"></paper-card>
          </div>
        </div>
       </template>
      </template>
    </dom-module>

Answer 1

你在这里遇到了一些特别棘手的事情，还有一些特别重叠的风格试图修复它。我看到你的卡上有一个灵活的宽度，这就是一个难点，如果你需要在两张卡之间有一个固定的100px，你需要依赖CSS计算。我已经按照你已经制定的大多数规则进行了操作，但是根据你的交付要求，当然有很多很小的CSS可以进入：

<dom-module id="portfolio-page">
  <style>
    :host[show] {
      @apply(--layout-horizontal);
      @apply(--layout-around-justified);
      @apply(--layout-wrap);
      height: 100%;
      max-width: 1000px;
      margin: 0 auto;
      background-color: var(--paper-grey-50);
      width: 100%;
      margin-top: 50px;
    }

    paper-card {
      max-width: 400px;
      min-width: 250px;
    }
    @media all and (min-width: 700px) {
      :host[show] {
        @apply(--layout-justified);
      }
      paper-card {
        width: calc(50% - 100px);
      }
      paper-card + paper-card {
        margin-left: 100px;
      }
    }

    @media all and (min-width: 1200px) {
      :host {
        width: 90%;
      }
    }


    </style>

<template>
  <template is="dom-if" if="{{show}}">
          <paper-card elevation="3" class="fancy">Test 1</paper-card>
          <paper-card elevation="3" class="fancy">Test 2</paper-card>
  </template>
</template>

享受！

Answer 2

纸卡+纸卡解决方案不会在第一张卡上腾出空间:)

我刚刚在我的网站上亲自使用此代码纸卡{ 最大宽度：300px; 最小宽度：250px; 保证金：10px; }

聚合物布局 - 在卡片和响应之间放置空间

2 个答案: