javascript - Polymer CSS 内联元素对齐

Question

我在使用 polymer 1.0 时遇到一些问题，我已经在官方网站上搜索了文档:http://polymer-project.org .

---

我有一些自定义元素: <little-game>和 <big-game> 在 <paper-material> 中都包含图像和一些文本元素。

---

我只想按此顺序显示元素:

第一行:一个大游戏元素，在同一行之后是另外两行小游戏元素。

到目前为止代码是这样的:

<div class="flex horizontal layout">
    <big-game></big-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
    <little-game></little-game>
</div>
<br/>
<br/>

我附上了一张照片，说明它现在的样子以及我想如何设计元素的对齐方式。

---

小游戏元素:

<dom-module id="little-game">
  <style>
    :host {
      display: block;
      margin-left:10px;
    }

    @media (max-width: 600px) {
      h1.paper-font-display1 {
        font-size: 24px;
      }
    }
    paper-material {
      border-radius: 2px;
      height: 140px;
      padding: 0 0 16px 0;
      width: 160px;
      margin: 8px 0 2px 0;
      background: white;
    }
    paper-material img {
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
    }
    #description {
      padding:4px 16px 0 8px;
    }

    paper-fab {
      top: -27.5px;
      display:inline-block;
      background: var(--accent-color);
    }
    paper-fab iron-icon {
      color: var(--text-primary-color);
    }
    #description {
      display:inline-block;
      top : -75px;
    }
  </style>
  <template>
    <paper-material elevation="1">
      <iron-image src="http://lorempixel.com/160/120"></iron-image>
      <div id="description">Little game</div>
      <!--paper-fab class="bottom" icon="av:play-arrow" title="Go to the X Game" role="button" tabindex="0" aria-label="arrow-forward" mini></paper-fab-->
    </paper-material>
  </template>
  <script>
    Polymer({
      is:'little-game'
    })
  </script>
</dom-module>

大型游戏元素:

<dom-module id="big-game">
  <style>
    :host {
      display: inline-block;
      float:left;
    }

    @media (max-width: 600px) {
      h1.paper-font-display1 {
        font-size: 24px;
      }
    }
    paper-material {
      border-radius: 6 px;
      height: 336px;
      width: 334px;
      margin: 8px 0 0 0;
      background: white;
    }
    paper-material img {
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
    }
    paper-fab {
      background: var(--accent-color);
    }

    paper-fab iron-icon {
      color: var(--text-primary-color);
    }
  </style>
  <template>
    <paper-material elevation="1">
      <paper-ripple></paper-ripple>
      <iron-image src="http://lorempixel.com/334/320"></iron-image>
    </paper-material>
  </template>
  <script>
    Polymer({
      is:'big-game'
    })
  </script>
</dom-module>

Answer 1

申请float: left;给你的<big-game> .

big-game { float: left; }

这里的概念证明:

https://jsfiddle.net/h7vy485e/