1

我有一个 MySQL 查询，我将其保存到一个变量中以在页面上输出。我有一个无序列表中的数据，但我试图使用 3 个向左浮动的无序列表将数据分成三列。这是我当前的代码：

        $sqlCommand = 
           "SELECT  list_specialty.id, list_specialty.specialty  FROM list_specialty
            ORDER BY list_specialty.specialty ASC";
        $query = mysqli_query($myConnection,$sqlCommand) or die (mysqli_error($myConnection));

        $specialtyDisplay = '';

        $num = mysqli_num_rows($query);
        $split = intval($num/3); //number of items in every column

        $i = 0;

        while ($row = mysqli_fetch_array($query)) {
            $specialtyid = $row["id"];
            $specialtyname = $row["specialty"];

            $specialtyDisplay .= 
                '<li><a href="doctor.php?specialty=' . $specialtyid . '">' . $specialtyname . '</a></li>';
            $i++;
            if ($i == $split) {
                $specialtyDisplay .= '</ul> <ul>';
                $i = 0;
            }

        }

只要我的数据完全可以被 3 整除（等列），这段代码就可以很好地工作。但是，当我的总行数不能被 3 整除时，上面的代码将不起作用。

我需要一个平衡列的解决方案，所以我可以有 3 个相等的列，第一列中有一个额外的元素，或者第一列和第二列中有一个额外的元素。

我需要在我的代码中更改什么来解决这个问题？

4

2 回答 2

1

这将起作用：

  1. 设置$split为最长列的长度
  2. 行有 0、1 或 2 列长一个元素。->$longcols = $num % 3
  3. $split从打印列号时减去 1 $longcols（除非所有列的长度相同）

在代码中实现：

$num = mysqli_num_rows($query);
$split = ceil($num/3); // 1.

$i = 0;
$col = 1; //for counting columns
$longcols = $num % 3; // 2.

while ($row = mysqli_fetch_array($query)) {
    $specialtyid = $row["id"];
    $specialtyname = $row["specialty"];

    $specialtyDisplay .= 
        '<li><a href="doctor.php?specialty=' . $specialtyid . '">' . $specialtyname . '</a></li>';
    $i++;
    if ($i == $split) {
        $specialtyDisplay .= '</ul> <ul>';

        if( $longcols != 0 && $longcols == $col ) { $split--; } // 3.
        $i = 0;
        $col++; //increase columns count
    }

}

带有注释的行是我已更改/插入的行。

于 2012-09-17T18:45:46.260 回答
0

如果要支持更好的浏览器，可以使用CSS 3 Multicolumns。它不需要你分开。只是 CSS 有魔力。

div#multicolumn {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
}

截屏：

CSS3 多列 http://css.flepstudio.org/images/css3/css3-multi-column.jpg

于 2012-09-17T17:33:55.860 回答