Question

我正在使用Ember.js，我的计划是创建一个表，每行有两个表格单元格，用于任意数量的表格单元格，以便

<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
  ...
</tr>

会变成

<tr>
  <td>1</td>
  <td>2</td>
</tr>
<tr>
  <td>3</td>
  <td>4</td>
</tr>
<tr>
  ...
</tr>

我能想到的最接近的用途是它与Facebook在Facebook群组中显示成员的方式类似。

目前这就是我所拥有的

<table id='group-member-table' class='table'>
  <thead>
    <tr>
      <th colspan='2'>Members</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      {{#each groupinfo.individuals as |member|}}
        <td>{{member.firstname}} {{member.lastname}</td>
      {{/each}}
    </tr>
  </tbody>
</table>

我对如何在Ember.js中执行此操作感到有点困惑，并且每个组都有一个动态的成员数。

Answer 1

我认为实现您正在尝试的方法的最佳方法是添加一些CSS并删除表格。

ssh -T ...

当元素填充第一行时，它们将换行到下一行，产生与表示例中相同的效果。

您的代码格式化方式，看起来应该是：

<div id="container" style="width:250px;">
    <div style="float:left;display:inline-block;width:100px;">1</div>
    <div style="float:left;display:inline-block;width:100px;">2</div>
    <div style="float:left;display:inline-block;width:100px;">3</div>
    <div style="float:left;display:inline-block;width:100px;">4</div>
</div>

Answer 2

我最终主要使用基于安德鲁模型的Bootstrap和CSS

<div class='group-member-container col-xs-12 col-sm-12 col-md-12'>
  {{#each groupinfo.individuals as |member|}}
    <div class='group-member-card col-xs-12 col-sm-6 col-md-6'>
      <div class='card'>{{member.firstname}} {{member.lastname}}</div>
    </div>
  {{/each}}
</div>

对于.scss文件：

.group-member-container {
  background: white;
  padding: 10px 0;
  .group-member-card {
    margin: 5px 0;
    .card {
      border: 1px solid #dddddd;
      box-shadow: none;
    }
  }
}

Ember.js - 每行显示两个表格单元格

2 个答案: