2016-12-25 79 views
0

一些隨機列在使用基礎zurb網格時崩潰,爲什麼?列崩潰

<div class="small-centered"> 
    <div class="row small-12 small-centered"> 
     <?php foreach ($videos as $video): ?> 
      <div class="column small-6 medium-4 large-4"> 
       <div>short text</div> 
       <img src="https://placehold.it/150x150" /> 
      </div> 
     <?php endforeach; ?> 
    </div> 
</div> 

enter image description here 的空白區域不是一個空div。

編輯:這裏是HTML和CSS輸出 enter image description here

+0

看起來沒有什麼不尋常的不知道Zurb基金會,使一個受過教育的猜測我們矇在鼓裏...你可以發佈與Inspect元素輸出的HTML嗎? – JackHasaKeyboard

+0

@JackHasaKeyboard我添加了截圖 –

回答

1

編輯:

你需要一個.end添加到您的最後一個元素。使用計數器和修改foreach循環像這樣(你可能需要調整它一點點:

<?php 
$i = 0; 
$len = count($videos); 
foreach ($videos as $video): 
    if ($i == $len - 1) { 
     echo '<div class="column large-4 end">'; //this is the last 
    } else { 
     echo '<div class="column large-4">'; // if not last-echo normally... 
    } ?> 
        <div>short text</div> 
        <img src="https://placehold.it/150x150" /> 
       </div> 
    <?php $i++; 
endforeach; ?> 
+0

我編輯了代碼,結果是分散的列,爲什麼我應該使用clearfix如果我沒有使用float類? –

+0

哦,看這裏:http://foundation.zurb.com/sites/docs/grid.html#incomplete-rows - 你需要添加.end到你的最後一個元素或重寫導致該問題的sass設置。@ImriPersiado – elicohenator

+0

如果最後一個元素如何添加.end到最後一個元素在不同的設備(小型,中型和大型)中ent是不一樣的? –