Question

<table>
  <tr>
     <td><img src="http://www.foo.com/a.img"></img></td>
     <td><img src="http://www.foo.com/a.img"></img></td>
     <td><img src="http://www.foo.com/a.img"></img></td>
     <td><img src="http://www.foo.com/a.img"></img></td>
     <td><img src="http://www.foo.com/a.img"></img></td>
  </tr>
</table>

上面的代码段显示了<td>中的5个<tr>元素。 <td>内的所有内容都相似。有没有办法优化这个，以便我可以通过某种形式的重复来处理这个问题（例如，类似于for循环）。

Answer 1

<style type='text/css'>
   .imageRepeat {
      width: 200px; /* image width*/
      height:1000px; /* height times the number of images */
      background-image: url('http://www.foo.com/a.img');
   }
</style>

<div class='imageRepeat'>
<!-- place holder for background image -->

</div>

空div将保留显示图像x所需次数的位置。那就是如果你试图重复相同的图像;

Answer 2

如果所有图像需要不同（或者由于某种原因你不能使用背景图像），我会漂浮图像：

<style>
img.float {
    float:left;
    clear:right;
}
</style>

<img src="http://placekitten.com/200/200" alt="" class="float" />
<img src="http://placekitten.com/200/200" alt=""class="float" />
<img src="http://placekitten.com/200/200" alt=""class="float" />
<img src="http://placekitten.com/200/200" alt=""class="float" />
<img src="http://placekitten.com/200/200" alt=""class="float" />

这将显示所有图像。

如何优化呈现以下HTML片段

2 个答案: