javascript - 如何并排显示图像

Question

此代码从上到下显示图像。

<tr ng-repeat='b in Brands = (Brands | firstLetter:activeLetter)'>
    <td><img src="http://localhost/{{ b.image }}" alt="" border=3 height=75 width=75><br><br></td>
</tr>

我想并排显示图像。一旦屏幕超过，移动到下一行。这可以用 angularJS/ui-bootstrap 方式吗？

如果不是 angularJS/ui-bootstrap 方式，那么最好的方式是什么？

编辑 这个逻辑对我有用

<div class="container">
    <div ng-repeat="b in Brands = (Brands | firstLetter:activeLetter)" ng-if="$index % 12 == 0" class="row">
        <div class="col-xs-1" ng-repeat="idx in [0, 1, 2, 3, 4, 5, 6, 7, 9, 10, 11]">
            <img src="http://localhost/{{ Brands[idx+$parent.$index].image }}" alt="" border=3 height=75 width=75>
        </div>
    </div>
</div>

但如果剩余图像不是 12，它会显示空框。

如何删除最后一行中的这些空框并在中心显示图像(或以某种方式看起来更好)。

Answer 1

通常执行此操作的最佳方法是通过指定 float:left; 或 float:right; 来应用 CSS float 属性> 作为这些图像的类的列出属性。