Question

很抱歉，如果这是一个容易解决的问题，我对聚合物来说还是比较新的。基本上我根本无法弄清楚如何制作卡片堆叠或根据可用的屏幕空间并排放置。因此，在我附上的图像中，这些卡片只是堆叠在一起，但如果有可用的屏幕空间，我希望它们并排放置。

我的测试只是在预先制作的聚合物演示上进行，所以下面的代码只是我的第一页/＆＃34; view1＆＃34;。

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">

<dom-module id="my-view1">
  <template>
    <style include="shared-styles">
      :host {
        display: block;

        padding: 10px;
      }
    </style>



    <div class="card">
      <div class="circle"><img src = "../images/Icons/1Game.png" alt = "Contact" style="width : 42px; padding-top: 10px"></div>
      <h1>Game Development<div class="rightSide">Unity3D</div></h1>

      <p>srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn </p>
    </div>

    <div class="card">
      <div class="circle"><img src = "../images/Icons/1Game.png" alt = "Contact" style="width : 42px; padding-top: 10px"></div>
      <h1>Game Development<div class="rightSide">Unity3D</div></h1>

      <p>srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn </p>
    </div>

    <div class="card">
      <div class="circle"><img src = "../images/Icons/1Game.png" alt = "Contact" style="width : 42px; padding-top: 10px"></div>
      <h1>Game Development<div class="rightSide">Unity3D</div></h1>

      <p>srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn </p>
    </div>



  </template>

  <script>
    Polymer({
      is: 'my-view1'
    });
  </script>
</dom-module>

Answer 1

看看app-grid或iron-flex-layout，无论如何，它们都是您在Polymer团队中可以使用的解决方案。你可以采取一些不同的方式。值得一看的另一件事是paper-card如果向下滚动一下不同的布局和内容部分，纸卡元素就会解决这个问题。

Answer 2

考虑使用display: inline-block，widely supported。

.card {
  display: inline-block;  /* layout side by side; wrap if needed */
}

HTMLImports.whenReady(() => {
  Polymer({
    is: 'my-view1'
  });
});

body {
  margin: 0;
  font-family: Roboto, Noto, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  background-color: #eeeeee;
}

<head>
  <base href="https://polygit.org/polymer+1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-icon/iron-icon.html">
  <link rel="import" href="iron-icons/hardware-icons.html">
</head>
<body>
  <my-view1></my-view1>

  <dom-module id="my-view1">
    <template>
      <style include="shared-styles">
        :host {
          display: block;
          padding: 10px;
        }

        h1 {
          display: flex;
          justify-content: space-between;
        }

        iron-icon {
          color: #52ae54;
          --iron-icon-width: 40px;
          --iron-icon-height: 40px;
        }

        .card {
          display: inline-block;
          width: 25%;
          min-width: 250px;
          max-width: 300px;
          margin: 24px 7px;
        }

        .rightSide {
          display: inline;
          font-weight: normal;
        }
    </style>

      <template is="dom-repeat" items='[1,2,3,4]'>
        <div class="card">
          <div class="circle"><iron-icon icon="hardware:videogame-asset"></iron-icon></div>
          <h1>Game Development [[index]]<div class="rightSide">Unity3D</div></h1>
          <p>srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn srndn </p>
        </div>
      </template>
    </template>
  </dom-module>
  
  <dom-module id="shared-styles">
    <template>
      <style>
        h1 {
          margin: 16px 0;
          font-size: 22px;
          color: black;
        }

        .card {
          margin: 24px;
          padding: 16px;
          color: #757575;
          border-radius: 5px;
          background-color: #fff;
          box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
        }
        
        .circle {
          display: inline-block;
          width: 64px;
          height: 64px;
          text-align: center;
          color: #555;
          border-radius: 50%;
          background: #ddd;
          font-size: 30px;
          line-height: 64px;
        }
      </style>
    </template>
  </dom-module>
</body>

codepen

Answer 3

你可以用简单的CSS来做到这一点：

#easy-css paper-card {
    width: 300px; margin: 0 auto;
}

#flexbox-css { /* container element */
    display: flex;
    justify-content: center;
}

如果你愿意，你可以深入了解iron-flex-layout，它正在以flexbox的方式进行：

<link rel="import" href="bower_components/polymer/polymer.html"/>
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html"/>
<link rel="import" href="bower_components/paper-card/paper-card.html"/>

<dom-module id="my-element">
<style>
    .container {
        @apply(--layout-horizontal);
        @apply(--layout-center-justified);
    }
</style>

<template>
    <div class="container">
        <paper-card>center-justified</paper-card>
    </div>
</template>
<script src="my-element.js"></script>
</dom-module>

使聚合物卡水平和垂直对齐

3 个答案: