Question

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

为了使它们在div中以漂亮的方式呈现并传播，我想我可以将它们放入表中，这样无论我有多少输出，它们都将被分类和组织。

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

然而，在做了一些研究后，我听说使用表格进行格式化是不好的，因为我应该保持内容和布局分开。

这种情况真的适用吗？如果是这样，当我不知道是否会有5,10或20个元素时，我怎样才能在div中制作出理想的布局？

Answer 1

如果您的数据集类似于单个单词或短语的长列表（如类别列表），则列表是最合适的标记。使用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;
}

Answer 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>

Answer 3

以下是如何将查询放入表中的示例。

$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变量设置行数

如何在不使用表格的情况下将文本片段放入网格状布局中？

3 个答案: