Question

我试着通过制作每张1,10,11,20,21,30，一张大图像来制作我的照片墙，其中包括ii 160 * 165，以及两张大图像之间的85 * 80 8张小图片

前五个元素完美运行，就像一个大图像，然后是4个小图像，像一个大的//第一行对齐

我想让第二行成为相同的模式，但是首先是4个小的，然后是大图像。但情况是它首先显示3个小的一个，并开始另一条线与左边小（我想要的是使这四个小的形状像一个方形），我尝试使用换行符（在位置$之后） i = 7,17,27 ...），但它不适用于浮动元素

<div style="width:350px"> 
    <?php
    $i=0;
    foreach($photo_array as $each){


        if($each!=''){
        $i++;

        $img_id=$username.$i;
         $pos=stripos($each,'&'); 
         $src=substr($each,$pos+1);

        $each_photo_string='user_data/post_img/'.$src;

        if(  (($i-1)%10==0) || ($i%10==0) ){
            echo '<img id="'.$img_id.'" class="p_photo_image" width="160"  height="165" style="margin-left:5px;float:left;"  alt="'.$each.'" src="'.$each_photo_string.'" >';
        }
        else{

                echo '<img id="'.$img_id.'" class="p_photo_image" width="85" height="80" style="float:left;margin-bottom:5px; margin-left:5px;"  alt="'.$each.'" src="'.$each_photo_string.'" >';
                if(($i%10)==7){
                    echo '<br>';
            }


        }

        }
    }

     ?>
</div>

Answer 1

如果您有浮动物品，则无法使用<br>。

尝试使用此代替<br>：

<div style="float:left; width:100%; height:1px; margin:20px 0; display:block;"></div>

您需要使用另一个浮动对象（带边距属性）作为休息

如何在float元素之间产生中断

1 个答案: