如何一个接一个地并排显示图像

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:right;或$data = file('../articles.txt'); $data=str_replace(array('<', '>', '\\', '/', '='), "", $data); foreach($data as $element) { $element = trim($element); $pieces = explode("|", $element); echo " <div class=article-box> <div class=article-image> <a href=" . $pieces[4] . "/" . $pieces[2] . "/ ><img src=" . $pieces[4] . "/" . $pieces[2] . "/" . $pieces[2] . "-img.png width=250px></a> </div> 指定为这些图像的类的列出属性来应用CSS $pieces[4]属性。