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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(CSS+DIV布局心得与体会)