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

将您的布局属性放在 <div> 的 class 属性中。

像这样：

<div class="flex horizontal layout">

你让它们成为独立的属性。这对 Polymer 0.5 有效。但不适用于 Polymer 1.0。在 1.0 中，他们需要进入 class 属性。

Answer 2

将float: left;应用到您的<big-game>。

big-game { float: left; }

此处的概念证明：

https://jsfiddle.net/h7vy485e/

Polymer CSS 内联元素对齐

Polymer CSS inline elements alignment

html

javascript

css

polymer

polymer-1.0

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