0

我从 mysql 数据库查询中输出了可变数量的 1 个单词的文本项。

为了使它们在 div 中以美观的方式呈现和传播，我想我可以将它们放在一个表中，这样无论我有多少输出，它们都会被排序和组织。

我想我可以使用 php 将输出弹出到一个数组中，并根据数组中元素的数量，我可以使用控制语句相应地修改格式。

然而，在做一些研究后，我听说使用表格进行格式化很糟糕，因为我应该将内容和布局分开。

这真的适用于这种情况吗？如果是这样，当我不知道是否会有 5、10 或 20 个元素时，如何在 div 中做出理想的布局？

4

3 回答 3

3

如果您的数据集类似于单个单词或短语的长列表（例如类别列表），则列表是最合适的标记。使用该columns属性，您可以获得一些类似于桌子的东西。

http://jsfiddle.net/b8Vw5/（显示 3 个列表：短、中和非常长）

ul {
    -webkit-columns: 3; /* I think I got all of the prefixes here... */
    -moz-columns: 3;
    -o-columns: 3;
    columns: 3;
    padding-left: 0;
}

li {
    list-style-type: none;
}
于 2012-12-22T04:20:12.560 回答
2

当人们说“使用表格进行格式设置不好”时，他们指的是使用设置宽度/高度的空表格单元格作为“填充”的古老技术，而不是使用 CSS。<table>元素绝对没有问题。

也就是说，如果你的是一个单词列表，那么在语义上将它们放在一个列表中会更有意义。为此，试试这个 CSS：

#mylist {list-style:none}
#mylist>li {
  display:inline-block;
  width:100px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

然后让您的 HTML 输出为：

<ul id="mylist">
  <li>Word</li>
  <li>Another</li>
  <li>Derp</li>
  <li>Blah</li>
  <li>UNICORNS!</li>
  ...
</ul>
于 2012-12-22T02:53:12.030 回答
2

这是一个如何将查询放入表中的示例。

$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);
        if ($mysqli->connect_errno)
        {
            echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
            $mysqli->close();
        }

    $values = $mysqli->query("YOUR SELECT GOES HERE");
    $cols = 3;
    $i =1;
    echo "<table>".PHP_EOL;
    echo "<tr>".PHP_EOL;
while($row = $values->fetch_assoc())
    { 

    if (is_int($i / $cols))
        {
            echo "<td >".PHP_EOL;
            //what ever you want to include goes here
            echo "</td>".PHP_EOL;
            echo "</tr>".PHP_EOL;
            echo "<tr>".PHP_EOL;
        }
        else
            {
                echo "<td >".PHP_EOL;
                //what ever you want to include goes here
                echo "</td>".PHP_EOL;
            }
            $i++;
    }
        echo "</tr>".PHP_EOL; 
        echo "</table>".PHP_EOL;

您可以使用 $cols 变量设置行数

于 2012-12-22T03:32:23.323 回答