2016-12-25 2 views
0

Некоторые случайные столбцы обрушиваются при использовании решетки основания, почему?Коллапс обрушения

<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 Заготовка область не пустые дела.

EDIT: здесь HTML, и CSS OUTPUT enter image description here

+0

Ничто не выглядит необычного не зная Zurb Foundation и сделать обоснованное предположение, что мы оставили в темноте ... вы можете опубликовать HTML-код, который выводится с помощью Inspect Element? – JackHasaKeyboard

+0

@JackHasaKeyboard Я добавил скриншот –

ответ

1

Edit:

вам нужно добавить .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

oh, посмотрите здесь: http://foundation.zurb.com/sites/docs/grid.html#incomplete-rows - вам нужно добавить .end к вашему последнему элементу или переопределить параметры sass, которые приводят к этому. @ImriPersiado – elicohenator

+0

Как я могу добавить .end к последнему элементу, если последний элемент не то же самое в разных устройствах (малых, средних и больших)? –