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

产品显示的时候,我遇到换行的问题采用的方法是:假如要一行显示4张产品图片,那么就先定义一个变量,初始值设置为1,每执行一次就加1,然后判断这个值是不是4的整数倍,是的话就输出标签</tr><tr>,那么就刚好与前面的<tr>配对,但是最后总会多出一组多余的标签</tr><tr>,虽然不影响效果,可是每次都觉得不爽。
  最近在学习DIV+CSS,偶然发现,一般DIV是按照横向排列的,而且当子DIV的宽度总长度大于父DIV长度的时候,那么后来加上去的子DIV就会被”挤“到下一行。所以利用这个特性就能很方便的实现自动换行了。
代码如下,现在需要做的就是将子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>

 

 

 

你可能感兴趣的:(自动换行)