动态显示数据自动换行的另一种方法！

产品显示的时候，我遇到换行的问题采用的方法是：假如要一行显示4张产品图片，那么就先定义一个变量，初始值设置为1，每执行一次就加1，然后判断这个值是不是4的整数倍，是的话就输出标签</tr><tr>,那么就刚好与前面的<tr>配对，但是最后总会多出一组多余的标签</tr><tr>,虽然不影响效果，可是每次都觉得不爽。
　　最近在学习ＤＩＶ＋ＣＳＳ,偶然发现，一般ＤＩＶ是按照横向排列的，而且当子ＤＩＶ的宽度总长度大于父ＤＩＶ长度的时候，那么后来加上去的子ＤＩＶ就会被”挤“到下一行。所以利用这个特性就能很方便的实现自动换行了。
代码如下，现在需要做的就是将子DIV标签的内容循环就可以了（比如我们从数据库中选取top  n条记录，不用考虑其他的东西，只要将父、子标签的宽度调整好就可以自动换行了）希望能作抛砖引玉之用：

 

<style>

 

<!--

 

#fdiv{

 

WIDTH:610px;/*可以适当放宽一点点*/

 

MARGIN-RIGHT: auto;

 

MARGIN-LEFT: auto; 

 

PADDING: 0px;

 

TEXT-ALIGN: center;

 

BORDER:#000000 1px solid;

 

}

 

#sdiv{

 

FLOAT:left;

 

WIDTH:150px;

 

HEIGHT:90px;

 

border: 1px dashed #cccccc;

 

}

 

-->

 

</style>

 

 

 

<div id="fdiv">

 

<div id="sdiv"><img src="http://www.blueidea.com/img/common/logo.gif" width="90" height="27"></div>

 

<div id="sdiv"><img src="http://www.blueidea.com/img/common/logo.gif" width="90" height="27"></div>

 

<div id="sdiv"><img src="http://www.blueidea.com/img/common/logo.gif" width="90" height="27"></div>

 

<div id="sdiv"><img src="http://www.blueidea.com/img/common/logo.gif" width="90" height="27"></div>

 

<div id="sdiv"><img src="http://www.blueidea.com/img/common/logo.gif" width="90" height="27"></div>

 

<div id="sdiv"><img src="http://www.blueidea.com/img/common/logo.gif" width="90" height="27"></div>

 

<div id="sdiv"><img src="http://www.blueidea.com/img/common/logo.gif" width="90" height="27"></div>

 

<div id="sdiv"><img src="http://www.blueidea.com/img/common/logo.gif" width="90" height="27"></div>

 

<div id="sdiv"><img src="http://www.blueidea.com/img/common/logo.gif" width="90" height="27"></div>

 

<div id="sdiv"><img src="http://www.blueidea.com/img/common/logo.gif" width="90" height="27"></div>

 

<div id="sdiv"><img src="http://www.blueidea.com/img/common/logo.gif" width="90" height="27"></div>

 

</div>