今天设计网页时遇到一个棘手的问题。我设计了个一行一列的表格。想让里面的图片自动换行，每行显示2幅图片（共10幅图片）。于是建表：

<table width=”600″>

<tr>

<td>

<img src=”xxx.jpg”>

<img src=”xxx.jpg”>

<img src=”xxx.jpg”>

<img src=”xxx.jpg”>

<img src=”xxx.jpg”>

……

</td>

</tr></table>

结果所有的图片都是一横排显示。后来按照网络上找的资料操作了一下，即添加上

style=”word-break:break-all”

还是不行，又换了一种方法，添加上

<style>
.td{width:100px;overflow:hidden}
</style>

这回倒是有点效果，不过我想要的是把所有图片分行显示出来。所以也没有达到效果。

实在没办法了，只好使出最后的招数了。表格内完全用div+css。于是设计了如下效果：

<table width=”680″>

<tr><td width=”680″>

<div class=”ctr”>

<div class=”ctt”>

<div class=”pic”>

<img src=”xxx.jpg”>

</div>

</div>

……

</div></td></tr></table>

css类文件代码：

.ctr { margin:0 auto;width:630px;height:auto;overflow:hidden;zoom:1;}
.ctt { margin:6px 4px;float:left;padding:1px;width:300px;height:180px;border:2px #E5EBF0 solid;display:inline;}
.pic { width:280px;height:160px;}

这回再测试一下终于完全正常了。