Filed under: CSS | 1 Comment »
Posted on 12月 10th, 2007 由 毛毛虫
写PHP的时候,最讨厌的就是循环输出时换行(比如:每5条数据换一次行)。读取记录集要用循环,换行还要用循环。烦死了!
现在使用了div+css的方法,终于可以把“换行”这种小问题交给css解决了。(怎么感觉像脑白金广告?)
实现的思路很简单:“大div套小div”。
在css中定义好大div的宽度和小div的宽度。
比如:
- .div1{width:600px;}
- .div2{width:140px;float:left;margin:5px;text-align:left;}
其中div1是整个布局,div2里放着每条数据。(div2里的float:left是让每个div2都居左对齐,margin:5px是留出间隔,text-align:left是让div2里的文本也居左对齐)
这样在页面中,只在div1中使用一次循环,只管输出div2。换行的问题,就留给css自己把关了,当div2的总宽度超过了div1的宽度,自然就会换到下一行。
所以,把两个div的宽度计算好。逢几换行由你定。
简单吧?
