如何使用MySQL查询中的行创建HTML表布局?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (92)

有以下代码:

$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>';
}

在下面的屏幕快照中所看到的,当标签有描述时,行会变得混乱,因为框的高度比其他的要大:

这些框的CSS是:

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

可以用div,每4个只需添加一个div,清除左浮点

$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>";
}
用户回答回答于

使用模运算符查看计数是否可被4整除:

if($count % 4 == 0) 

如果要保留CSS解决方案,还可以为div设置一个高度,然后将溢出设置为隐藏以处理过长的描述。

扫码关注云+社区

领取腾讯云代金券