Question

在聚合物元素中，我正在尝试使用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模板中的完全相同的代码时（在聚合物元素之外但使用dom-repeat），它可以正常工作。

Answer 1

我很快就读到了丢失的内容。如果你必须使用它，我不能给你一个特定的答案，但如果你只有几个你正在对齐的div，Polymers布局管理器似乎就足够了。

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

<div class='horizontal layout wrap'>

这里有很多div与模板重复

</div>

这是一个基本的例子，当然需要定制。

希望这会有所帮助。

Answer 2

我怀疑这可能是因为影子DOM。你在使用shadow DOM还是使用shady DOM？如果您使用的是shadow DOM，则需要在元素的dom-module中添加CSS才能使其生效。

换句话说，你应该有这样的东西：

<dom-module id="an-element-with-grid">
    <link rel="import" type="css" href="an-element-with-grid.css"> <!-- This will be the home of your lost CSS -->
    <template>
        <div class="grid"> 
            <template is="dom-repeat" items="{{data}}">
                <div class="grid__col">Example Content</div>
            </template>
        </div>
    </template>
</dom-module>

这是影子DOM规范。元素阴影DOM中的节点对外部作用域隐藏，以防止外部样式踩到元素的内部样式。

dom-repeat中的网格布局中断

2 个答案: