0

我正在构建一个聚合物应用程序来显示学生的详细信息。我想用每个学生的名字和图像动态地制作纸卡。现在我通过复制同一张卡片制作了5张卡片。但是每张纸卡都显示在同一行。我希望每行显示 4 张纸卡。

    <dom-module id="card-view">


  <template>

    <style>
      /* local styles go here */
      :host {
        display: inline-block;
      }
      .card {
        margin-left: 5px;
        margin-right: 5px;





      }


    </style>
    <style is="custom-style">
  .flex {
    @apply(--layout-horizontal);
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    width:100%;


  }
</style>

    <!-- local DOM goes here -->




    <div class="container flex">


    <div class="card">
      <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000">
        <div class="card-content">
          Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
      </div>
  <div class="card-actions">
    <paper-button>Share</paper-button>
    <paper-button>Explore!</paper-button>
  </div>
</paper-card>
</div>


<div class="card">
  <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000">
    <div class="card-content">
      Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
  </div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
</div>

<div class="card">
  <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000">
    <div class="card-content">
      Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
  </div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
</div>


<div class="card">
  <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000">
    <div class="card-content">
      Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
  </div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
</div>


<div class="card">
  <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000">
    <div class="card-content">
      Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
  </div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
</div>


<div class="card">
  <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000">
    <div class="card-content">
      Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
  </div>
<div class="card-actions">
<paper-button>Share</paper-button>
<paper-button>Explore!</paper-button>
</div>
</paper-card>
</div>
</div>
</template>

  <script>
  Polymer({
    is: 'card-view',
  });
  </script>

</dom-module>
4

2 回答 2

0

这可以使用iron-flex-layout-classes元素来实现。我们使用<style include="iron-flex iron-flex-layout">标签包含我们需要的类。为了限制同一行上的最大卡片数量，我们将:host类设置为max-width只有一个大到足以在同一行上放置四张这样的卡片。div包含卡片的 具有以下类<div class="container flex layout horizontal wrap">。有了这些，我们实现了水平布局，当它不能容纳里面的元素时，它会自动换行。

下面的工作示例。将其作为全屏运行以更轻松地查看效果。

<!-- https://stackoverflow.com/questions/37050702/how-to-display-only-4-divs-in-1-row-polymer -->
<!doctype html>

<head>
  <meta charset="utf-8">
  <!---- >
  <base href="https://polygit.org/components/">
  Toggle below/above as backup when server is down
  <!---->
  <base href="https://polygit2.appspot.com/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-flex-layout/iron-flex-layout-classes.html">
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="paper-card/paper-card.html">
</head>

<body>

  <dom-module id="card-view">


    <template>

      <style include="iron-flex iron-flex-layout">
        /* local styles go here */
        :host {
          display: block;
          max-width: 1450px;
        }
        .card {
          width: 350px;
          margin-left: 5px;
          margin-right: 5px;
        }
      </style>

      <!-- local DOM goes here -->
      <div class="container flex layout horizontal wrap">
        <div class="card">
          <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000">
            <div class="card-content">
              Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
            </div>
            <div class="card-actions">
              <paper-button>Share</paper-button>
              <paper-button>Explore!</paper-button>
            </div>
          </paper-card>
        </div>


        <div class="card">
          <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000">
            <div class="card-content">
              Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
            </div>
            <div class="card-actions">
              <paper-button>Share</paper-button>
              <paper-button>Explore!</paper-button>
            </div>
          </paper-card>
        </div>

        <div class="card">
          <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000">
            <div class="card-content">
              Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
            </div>
            <div class="card-actions">
              <paper-button>Share</paper-button>
              <paper-button>Explore!</paper-button>
            </div>
          </paper-card>
        </div>


        <div class="card">
          <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000">
            <div class="card-content">
              Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
            </div>
            <div class="card-actions">
              <paper-button>Share</paper-button>
              <paper-button>Explore!</paper-button>
            </div>
          </paper-card>
        </div>


        <div class="card">
          <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000">
            <div class="card-content">
              Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
            </div>
            <div class="card-actions">
              <paper-button>Share</paper-button>
              <paper-button>Explore!</paper-button>
            </div>
          </paper-card>
        </div>


        <div class="card">
          <paper-card heading="Emmental" image="http://placehold.it/350x150/FFC107/000000">
            <div class="card-content">
              Emmentaler or Emmental is a yellow, medium-hard cheese that originated in the area around Emmental, Switzerland. It is one of the cheeses of Switzerland, and is sometimes known as Swiss cheese.
            </div>
            <div class="card-actions">
              <paper-button>Share</paper-button>
              <paper-button>Explore!</paper-button>
            </div>
          </paper-card>
        </div>
      </div>
    </template>

    <script>
      Polymer({
        is: 'card-view'
      });
    </script>

  </dom-module>

  <card-view></card-view>

</body>

于 2016-05-05T18:18:30.937 回答
0

没有尝试过，但这可能会做你想要的：

:host {
  @apply(--layout-horizontal);
  @apply(--layout-wrap);
}

.card:nth-of-type(4n) {
  flex-basis: 100%;
}
于 2016-05-05T13:15:13.957 回答