HTML/CSS：这可以通过列表或表格来实现吗？答案

【问题标题】：HTML/CSS: Could this be achieved with a list or table?HTML/CSS：这可以通过列表或表格来实现吗？
【发布时间】：2013-11-06 09:06:45
【问题描述】：

我正在尝试制作一个超链接图像列表，目录中的每种颜色都有一个。我希望布局看起来像这样：

只是，我可能只会做 5 或 6 宽，不管多少高。要添加的图像将从 MySQL 查询的结果中生成，因此它不会是静态的。使用 foreach 语句制作这样的列表元素很容易：

foreach ($result as $key => $value) {

  echo '<li><a href="?color='.$value.'"><img src="'.$value.'.jpg" /></a></li>';

}

...以上作为一个简单的例子。但是，如果这不能通过列表实现，我将如何使用表格来做到这一点，不知道我会提前有多少结果，因此不知道我有多少 <td> 和 <tr>需要吗？

谢谢！

【问题讨论】：

你在谈论这样的事情吗？ 1054.fleeceitout.com/council
@Deryck - 差不多，只是规模要小得多，最多有 20 多个元素（颜色）
如果您可以用“是”回答以下问题，您只需要<table>：我想显示表格数据吗？出于所有其他目的：1999 年调用并希望将其<table>s 用于布局目的！

标签： php html mysql css

【解决方案1】：

使用 div 或 li 并简单地使用float:left

此外，您可以计算数据库返回的结果，从而计算出您需要多少 tr/td，因此在生成表格之前不知道会有多少结果是不正确的。

【讨论】：

display:inline-block; list-style: none;

【解决方案2】：

你能用<div>标签代替吗？

foreach ($result as $key => $value) {

  echo "<div class='some-class'>
           <a href='....?color=$value'><img src='$value.jpg' /></a>
        </div>";

}

..然后应用 css 并将其浮动，以便它很好地填充父容器？即：

div.some-class { …… …… 向左飘浮; }

【讨论】：

【解决方案3】：

你也可以像这样使用display: inline-block：

foreach ($result as $key => $value) {
    echo <<<CODE
    <li style="display: inline-block">
        <a href="?color=$value">
            <img src="$value.jpg" />
        </a>
    </li>
CODE;
}

【讨论】：

【解决方案4】：

与其他答案一样，我建议您也使用列表，但如果您必须使用表格，请使用以下代码

<?php
$noPerRow = 10; //adjust this to your layout
if ($result){?>
  <table>
    <tr>
      $c = 0;       
      foreach ($result as $key => $value) {
        $c++;
        echo '<td><a href="?color='.$value.'"><img src="'.$value.'.jpg" /></a></td>';
        if ($c % $noPerRow == 0){
            echo '</tr><tr>';
        }
      }
      //tidy up last row
      while ($c % $noPerRow != 0){
        echo '<td>&nbsp;</td>';
        $c++;
      }
      ?>
      </tr></table><?php

}
?>

【讨论】：