Как отобразить только 4 div в 1 строке (Polymer)

Я создаю полимерное приложение, чтобы показать информацию о студентах. Я хочу динамически создавать бумажные карточки с именем и изображением каждого ученика. Прямо сейчас я сделал 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>

html polymer polymer-starter-kit polymer-1.0
person Nijinsha Rahman    schedule 05.05.2016    source источник
comment
polymer-project.org/1.0/docs/migration.html# атрибуты макета   -  person Goce Ribeski    schedule 05.05.2016

Ответы (2)


arrow_upward
0
arrow_downward

Не пробовал, но это может сделать то, что вы хотите:

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

.card:nth-of-type(4n) {
  flex-basis: 100%;
}
person Günter Zöchbauer    schedule 05.05.2016
comment
Что значит не работает? Как насчет JSBin или Plunker, которые позволяют воспроизводить? - person Günter Zöchbauer; 05.05.2016

arrow_upward
0
arrow_downward

Этого можно добиться с помощью элемента 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>

person Snekw    schedule 05.05.2016