这样的列表显示是怎么循环的呢

本帖最后由 liaohongchu 于 2012-08-27 11:58:53 编辑

解决方案 »

  1.   

    你没发现规律啊，所有图片一样宽度(可在显示的时候调整)
    图片的高度就两种，一是短的一是长的，组合着用，就很整齐了两种css样式就行了
      

  2.   

    <div class="main_left1">
      <div class="pic1"><a href="#" ><img src="<?php echo $cfg_basehost;?>/member/templets/imshow/images/pic2.jpg" width="230" height="160" /><span>美人人气榜1名       【朱茵茵】</span></a></div>
      <div class="pic1"><a href="#" ><img src="<?php echo $cfg_basehost;?>/member/templets/imshow/images/pic1.jpg" width="230" height="290" /><span>美人人气榜1名       【朱茵茵】</span></a></div>
    </div>
    <div class="main_left1">
      <div class="pic1"><a href="#" ><img src="<?php echo $cfg_basehost;?>/member/templets/imshow/images/pic1.jpg" width="230" height="290" /><span>美人人气榜1名       【朱茵茵】</span></a></div>
      <div class="pic1"><a href="#" ><img src="<?php echo $cfg_basehost;?>/member/templets/imshow/images/pic2.jpg" width="230" height="160" /><span>美人人气榜1名       【朱茵茵】</span></a></div>
    </div>
    页面时按这样排版的 不好循环 ？
      

  3.   


    <!doctype html>
    <html>
    <meta charset=utf-8>
    <style>
    .main_wrapper{width:900px;min-height:200px;margin:10px auto;overflow:hidden;}
    .two_pictures{width:200px;float:left;margin-bottom:10px;padding:5px;margin:6px;}
    .main_wrapper,.two_pictures,img{border:1px solid #ABC;}
    .pic_1{height:150px;width:200px;}
    .pic_2{height:100px;width:200px;}
    <!--样式随便改-->
    </style>
    <body>
    <div class="main_wrapper">
    <?php
    for($i=0;$i<8;++$i){
    if(($i)%2==0){
    $style1="pic_2";
    $style2="pic_1";
    }else{
    $style1="pic_1";
    $style2="pic_2";
    }
    $picArr = array(
    "http://www.iimei.com/1/xunhuan.jpg",
    "http://www.iimei.com/1/xunhuan.jpg"
    );//把图片改为动态的，自已调整
    echo '
    <div class="two_pictures">
    <img src="'.$picArr[0].'" class="'.$style1.'"/>
    <span>This is a test</span>
    <img src="'.$picArr[1].'" class="'.$style2.'"/>
    <span>This is a test</span>
    </div>
    ';
    }
    ?>

    </div>
    </body>
    </html>