Создать динамическую табличную сетку без использования таблиц - PullRequest
Новая
       9

Создать динамическую табличную сетку без использования таблиц

1 голос
/ 20 сентября 2011

Мне интересно, возможно ли создать сетчатый макет, используя div, которые динамически создаются с использованием PHP.

Я создаю страницу продукта, которая отображает все продукты в базе данных PHP. Я хочу, чтобы каждый продукт размещался в блоке, а 3 блока отображались в строке с таким количеством строк, сколько необходимо для просмотра всех продуктов.

Примерно так: 

div              div              div
$row['product1'] $row['product2'] $row['product3']

div              div              div
$row['product4'] $row['product5'] $row['product6']

Я бы предпочел не использовать стол. Я знаю, как выравнивать деления, используя свойства float и clear, но нет, если они все создаются в операторе while, что заставляет меня думать, что это невозможно.

Так что я думаю, это возможно без использования таблиц, или я должен просто придерживаться этого?

1 Ответ

1 голос
/ 20 сентября 2011

Это можно сделать так, как вы просите, хотя это не лучший способ.Вполне возможно определить позиции <div> внутри столбцов в цикле while: 

// Looping over your results simplified...
$i = 1;
while ($results) {
   if ($i % 3 == 1) {
      $div_class = 'left';
   }  
   else if ($i % 3 == 2) {
      $div_class = 'middle';
   }
   else {
      $div_class = 'right';
   }
   $i++;

   // output, simplified
   echo "<div class='$div_class'>$row_contents</div>";
}

Затем используйте CSS для перемещения и очистки по мере необходимости для классов left, middle, right. 

.left, .middle, .right {
   float: left;
}
.left { clear: left; }
.right { clear: right; }

Однако,

Учитывая все это, я все еще, вероятно, не буду беспокоиться о <div> с.Семантически, если это список продуктов, вы должны указывать их в тегах <li>.Затем просто наберите от <li> до float: left; и увеличьте ширину контейнера на 33%, чтобы получить по 3 на строку.

...