Как создать макет таблицы HTML с строками из запроса MySQL?

Question

На моей странице «популярные теги», я загрузка всех тегов из базы данных с помощью PHP & SQL, чтобы из самых популярных в наименее популярный:

$sql = "SELECT t.tagid, t.name, t.desc, COUNT(qt.id) AS total 
     FROM tags t 
     LEFT JOIN question_tags qt ON t.tagid=qt.tag_id 
     GROUP BY t.tagid, t.name 
     ORDER BY total DESC"; 

$result = mysql_query($sql) or die(mysql_error()); 

while($row=mysql_fetch_assoc($result)) { 
    echo '<div class="tag-list-box" id="tag-'.$row['tagid'].'"> 
     <a href="/tags/'.strtolower($row['name']).'" class="tag"> 
     <span class="label label-inverse label-tag">'.strtolower($row['name']).'</span> 
     </a> <strong>&times; '.$row['total'].'</strong><br /> 
     <p>'.($row['desc']!==null ? $row['desc'] : '<em>This tag has no description.</em>').'</p> 
     </div>'; 
} 

У меня нет его в HTML сейчас, потому что я думал, что могу сделать это более «современным способом» с div и CSS, но, как вы можете видеть на этом скриншоте ниже, строки перепутаны, когда у тега есть описание, потому что высота окна больше, чем другие:

Мой CSS для боксов:

.tag-list-box { 
    width: 20%; 
    padding: 5px; 
    background-color: #f0f0f0; 
    border: 1px solid #ccc; 
    float: left; 
    margin-right: 2%; 
    margin-bottom: 10px; 
} 

Я имею в виду, я должен поместить его в таблицу, которая должна исправить эту проблему, но мой вопрос как я делаю каждые 4 строки из запроса имеют свои собственные <tr> поэтому в каждой строке таблицы может быть 4?

Я не могу понять это — я попытался сделать подсчет и увеличивающимся его в петле while, но тогда я просто не знаю, куда идти оттуда.

Answer 1

Да, я бы посмотрел, есть ли у вас 4 подряд, как сказал Скотт. Вы можете использовать div. После каждых 4 просто добавьте div, который очищает левый float. Я бы не использовал высоту набора, потому что вы никогда не знаете, как высокие предметы получат. Пример того, что я буду делать:

$count = 0; 
while($row=mysql_fetch_assoc($result)) { 
    echo '...'; //YOUR CURRENT ECHO STATEMENT HERE 
    $count++; 
    if($count % 4 == 0) echo "<div style='clear: left;'></div>"; 
} 

Answer 2

Используйте оператор по модулю, чтобы увидеть, если ваш счетчик делится на 4:

if($count % 4 == 0) 

Если вы хотите сохранить свое решение CSS, вы также можете установить высоту для дивы, а затем установить переполнение скрытый в обрабатывать описания, которые слишком велики.