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

Question

我尝试通过制作每 1、10、11、20、21、30 一个大图像来格式化我的照片墙，其中 ii 160*165，并且在两个 85*80 的大图像之间有8张小图

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

我想使第二行具有相同的图案，但先有 4 个小图像，然后是大图像。但情况是它首先显示3个小的，然后从左边的小开始另一行(我想要的是让这四个小的形成一个正方形)，我尝试使用换行符(在位置$之后i=7,17,27...)，但它不适用于 float 元素

<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 对象(具有边距属性)作为中断