如何在浮動元素之間產生中斷

我試圖通過使每個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>

來源

2014-03-13 Kesong Tse

不能使用<br>，如果你手上有漂浮物。

試試這個，而不是<br>：

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

您需要使用另一個浮動對象（含容限屬性）作爲休息

來源

2014-03-13 01:19:17 pes502

僅供參考'保證金：20像素20像素0像素是0px'一樣'邊距：20px 0px' – kennypu

@kennypu是的，謝謝:)短缺 – pes502

不起作用，如果我使用這一個，在第二行中，它首先顯示2小的一個，然後開始一個20px的下一個新行，並繼續顯示另一個2，然後按大的 –

如何在浮動元素之間產生中斷

回答

相關問題