DIV常用的布局效果

1.案例一：php怎么横向循环输出图片 并且图片达到5张时 自动换行？
HTML静态输出效果
CSS文件：

DIV的内容：

 

第1个

 

第2个

 

第3个

 

第4个

 

第5个

 

第6个

 

第7个

 

第8个

通过指定其宽度来限制好输出样式即可！

PHP程序实现：

header("Content-Type:text/html;charset:utf-8");
$row1 = array('id'=>1,'name'=>'水果');
$row2 = array('id'=>2,'name'=>'蔬菜');
$row3 = array('id'=>3,'name'=>'肉类');
$row4 = array('id'=>4,'name'=>'水产品');
$row5 = array('id'=>5,'name'=>'花卉');
$bigclass = array(0=>$row1,1=>$row2,2=>$row3,3=>$row4,4=>$row5);
#以上可以模拟从DB中读取数据的方式进行了调用数据
$row6 = array('id'=>5,'name'=>'TESTTESTTES');
$smallclass = array(0=>$row6,1=>$row6,2=>$row6,3=>$row6,4=>$row6,5=>$row6,6=>$row6,7=>$row6);
echo "";

echo "";
echo "

";
for ($i=0;$i    $name = $bigclass[$i]['name'];
    echo "

$name

";
}
echo "

";

用css来控制,设定图片大小,向左飘,补白
要多少个图片转行,设置一下div和img的大小就可以了
关键是要设置好DIV的宽度出来！如果有宽度出来了。则大小就会固定好的！
通过CSS来取代传统的TABLE布局



2.案例二：

">
">

   

       

                            for ($i=0;$i<$firstfor;$i++){
                   
            ?>
           
• 
                 
  
                                              for ($j=0;$j                    ?>
                         
                     
                         
                     
                 
  
               

                   
               
       
       
       

   

   
   

       

                            for ($i=0;$i<$secondfor;$i++){
                   
            ?>
           
• 
                 
  
                                              for ($j=0;$j                    ?>
                         
                     
                         
                     
                 
  
               

                   
               
       
       
       

   

分成两个DIV分别输出来！
现在将这段DIV封装到PHP输出成一段JS出来！