html - 谷歌 polymer : how to properly put divs inside paper-material element?

Question

这是我的代码:

.block {
  width: 25%;
  float: left;
 }

<paper-material elevation="1">
  <p>List of blocks:</p>
  <div class="block">
    <p>Block 1</p>
  </div>
  <div class="block">
    <p>Block 2</p>
  </div>
  <div class="block">
    <p>Block 3</p>
  </div>
  <div class="block">
    <p>Block 4</p>
  </div>
</paper-material>

Paper-material 元素只包含“ block 列表”标签，所有四个 div 都在外面。我怎样才能修复它，使 div 位于纸 Material 元素内？

谢谢。

Answer 1

进口iron-flex-layout并将 @apply --layout-horiztonal; 添加到您的 CSS，目前相当于

display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;