css - dom-repeat 内的网格布局中断

Question

在一个 polymer 元素中，我试图用 lost-grid 构建一个简单的多列布局。使用 dom-repeat 呈现元素列表.它看起来像这样:

HTML

<div class="grid"> 
  <template is="dom-repeat" items="{{data}}">
     <div class="grid__col">Example Content</div>
  </template>
</div>

CSS

.grid {
  lost-utility: clearfix;
  lost-center: 100%;
  position: relative;
}
.grid__col {
  lost-column: 1/2 2 0px; 
}

例如，如果分配给 dom-repeat 的数据数组有 4 个元素，则呈现以下 HTML:

<div class="grid"> 
  <div class="grid__col">Example Content</div>
  <div class="grid__col">Example Content</div>
  <div class="grid__col">Example Content</div>
  <div class="grid__col">Example Content</div>
</div>

不是以 50% 的宽度显示列，而是布局中断并且它们堆叠在彼此之上。如果我删除 dom-repeat 并手动列出 4 列，它就可以工作。在这两种情况下，代码最终是相同的，所以我猜测模板的呈现以某种方式与列可以占用的总宽度混淆。

另一件需要注意的事情是，当直接在页面主体中的 dom-bind 模板中使用完全相同的代码时(在 polymer 元素之外但使用 dom-repeat)，它是有效的。

Answer 1

我只是快速阅读了有关 lost 的内容。如果你必须使用它，我不能给你一个具体的答案，但如果你只有几个要对齐的 div，Polymers 布局管理器似乎就足够了。

在类似的情况下，我使用了 wrap 布局和 calc() CSS 运算符(它似乎在幕后使用，无论如何都丢失了)。

<div class='horizontal layout wrap'>

这里有很多带有模板重复的 div

</div>

这是一个基本示例，当然需要进行定制。

希望这对您有所帮助。