Html 设置网格样式结果的问题

我想在网格结果表中显示一个表，但我失败了

我希望它看起来像这样：

我试着这样做，但它只显示了一行：

<div class="resultsTable">
            <table style="display: inline-table">
                <tr ng-repeat="result in results" class="resultsBox">
                    <td>
                        <img src="{{result.imageUrl}}" width="200px">
                        <h4>{{result.name}}</h4>
                    </td>
                </tr>



            </table>
        </div>

---

从您共享的模板中，您通常只看到一列n行。它不是指向css的链接，而是指向将生成的标记的链接

您的

results

属性是一个一维数组，类似[{obj1}、{obj2}、{obj3}]，但您希望将矩阵显示为二维数组，即[{obj1}、{obj2}、{obj3}、{obj4}]]。不幸的是，在AngularJS中，基于一维数组生成矩阵并不容易。这就是为什么我建议您更改结果的结构以匹配其矩阵显示。然后将模板更改为类似以下内容：

<div class="resultsTable">
    <table style="display: inline-table">
      <tr ng-repeat="row in results"> //loop over all row of 2 elements
        <td ng-repeat="cell in row" class="resultsBox"> //loop over elements
          <img src="{{cell.imageUrl}}" width="200px">
          <h4>{{cell.name}}</h4>
        </td>
      </tr>
    </table>
  </div>

//在2个元素的所有行上循环
//环绕元件
{{cell.name}

---

请参阅一个正在工作的plunker

img

不是

的子项。结果框

。在编译成HTML代码之前，它不是HTML代码，而是服务器端代码或模板。请显示浏览器将看到的内容。谢谢。我是网络开发新手。我使用angularjs，html是从客户端服务器呈现的，这就是您在这里看到的。Ng repeat正在复制此表行。我认为这里的问题是样式，因为我看到了一行结果，但它们被堆叠在1列而不是2列中。这是显示n个项目所需的全部html。这不是浏览器不必先用JavaScript编译就能显示的html代码。这是AngularJS模板，看起来很像HTML，但许多循环和变量将被扩展（在JS中），以创建浏览器最终使用real

src

和real number of table、rows和cells呈现的内容。用Firebug查看或检查您已经创建了多少个单元格和行。我打赌每行有1个单元格，因此是1列，而不是2列。这种框架（和CSS预处理器）不适合初学者，如果你不知道会发生什么事的话。谢谢你的回答，但这太过分了。这只需要使用一个流布局，允许在转到下一行之前对每一行的项目进行排序。我想我应该问一下流程布局

<div class="resultsTable">
    <table style="display: inline-table">
      <tr ng-repeat="row in results"> //loop over all row of 2 elements
        <td ng-repeat="cell in row" class="resultsBox"> //loop over elements
          <img src="{{cell.imageUrl}}" width="200px">
          <h4>{{cell.name}}</h4>
        </td>
      </tr>
    </table>
  </div>