Создание конструктивной строки с квадратным шагом без Javascript

Question

Я пытаюсь создать разметку для некоторых блоков контента, где каждый блок имеет ту же самую ширину, но может иметь разную высоту. Тем не менее, каждый элемент является последовательным, поэтому они должны быть более или менее разборчивыми слева направо (то есть: столбец 1 имеет пункты 1 и 4, колонка 2 имеет пункты 2 и 5, а в столбце 3 - пункт 3)

Это моя идея: http://oi59.tinypic.com/24b66hw.jpg

Это была моя первая мысль:

<?php 
    $arr = array(); 
    $arr[] = array('title' => 'Day 1', 'img' => '/image1.png', 'text' => 'Text for item 1'); 
    $arr[] = array('title' => 'Day 2', 'img' => '/image2.png', 'text' => 'Text for item 2'); 
    $arr[] = array('title' => 'Day 3', 'img' => '/image3.png', 'text' => 'Text for item 3'); 
    $arr[] = array('title' => 'Day 4', 'img' => '/image4.png', 'text' => 'Text for item 4'); 
    $arr[] = array('title' => 'Day 5', 'img' => '/image5.png', 'text' => 'Text for item 5'); 

    $cols = array(); 
    $cols[0] = array(); 
    $cols[1] = array(); 
    $cols[2] = array(); 

    for($x = 0; $x <= count($arr); $x+=3) { 
     $cols[0][] = $arr[$x]; 

     if (isset($arr[$x+1])) { 
      $cols[1][] = $arr[$x+1]; 
     } 

     if (isset($arr[$x+2])) { 
      $cols[2][] = $arr[$x+2]; 
     } 
    } 

    foreach($cols as $key => $col) { 
     echo '<div class="col'.$key.'">'; 
     foreach($col as $item) { 
      echo '<div class="row-item">'; 
      echo 'Title: '.$item['title'].'<br />'; 
      echo 'Image: '.$item['img'].'<br />'; 
      echo 'Text: '.$item['text']; 
      echo '</div>'; 
     } 
     echo '</div>'; 
    } 
?> 

что бы создать этот:

<div class="col0"> 
    <div class="row-item"> 
     Title: Day 1<br> 
     Image: /image1.png<br> 
     Text: Text for item 1 
    </div> 


    <div class="row-item"> 
     Title: Day 4<br> 
     Image: /image4.png<br> 
     Text: Text for item 4 
    </div> 
</div> 


<div class="col1"> 
    <div class="row-item"> 
     Title: Day 2<br> 
     Image: /image2.png<br> 
     Text: Text for item 2 
    </div> 


    <div class="row-item"> 
     Title: Day 5<br> 
     Image: /image5.png<br> 
     Text: Text for item 5 
    </div> 
</div> 


<div class="col2"> 
    <div class="row-item"> 
     Title: Day 3<br> 
     Image: /image3.png<br> 
     Text: Text for item 3 
    </div> 
</div> 

к сожалению, я столкнулся с проблемой, когда я был тол d макет должен быть отзывчивым, а при отображении на меньших экранах - только одна строка вместо трех, например: http://oi62.tinypic.com/2hfudj6.jpg

Я, похоже, не думаю о каком-либо образе этой конкретной проблемы за пределами использования JavaScript для реорганизации блока на небольших экранах или отдельный вывод блоков, который отображается только на небольших экранах.

Answer 1

Ahh, я бы указал вам в сторону HTML5 CSS3 columns. Крис Койер делает a nice writeup here и CodePen here.

Это простое исправление CSS. Вы можете изменить их в запросах @media. Если я не ошибаюсь, Pinterest использует это, плюс резерв Javascript для не поддерживающих браузеров.

Теперь это означает, что ваш контент будет поступать (в исходном порядке) сверху вниз затем слева направо, так:

1 | 5 | 9 
2 | 6 | 10 
3 | 7 | 11 
4 | 8 | 12 

... как газетные колонки.

Answer 2

PHP, вероятно, не нужен, так как CSS-псевдоклассы должны делать гораздо более чистую (и менее исчерпывающую) работу.

Первый пример позволяет целевым каждый нечетный и даже встречающийся экземпляр сНа элемента .col:

.col:nth-child(odd) { 
      /* Your Styles */ 
    } 

.col:nth-child(even) { 
      /* Your Styles */ 
    } 

Или для более конкретного контроля, это позволит вам целевой элемент по порядку появления:

.col:nth-child(1) { 
      /* Your Styles */ 
    } 

.col:nth-child(2) { 
      /* Your Styles */ 
    } 

.col:nth-child(3) { 
      /* Your Styles */ 
    } 

Теперь, конечно, это поможет вам настроить столбцы для среды рабочего стола. Что относительно мобильных или других видовых экранов? Запросы СМИ.

@media screen and (max-width: 1024px) { 
     .col:nth-child(1) { 
       /* Your Styles */ 
      } 
    } 

Это позволит вам определить поведение отдельных столбцов на меньшем видовом экране. Реплицируйте медиа-запрос столько, сколько вам нужно, чтобы точно точно определить, как они должны вести себя во всех размерах экрана.