Question

我有一个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个相等的列，第一列中有一个额外的元素，或者第一列和第二列中有一个额外的元素。

我需要更改代码才能解决这个问题？

Answer 1

这将有效：

将$split设置为最长列的长度
行包含0,1或2列，这些列由一个元素组成。 - ＆GT; $longcols = $num % 3

$split

从$longcols中减去1（除非所有列的长度相等）

在代码中实现：

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

}

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

Answer 2

如果您要支持更好的浏览器，可以使用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 MultiColumn http://css.flepstudio.org/images/css3/css3-multi-column.jpg

在3个不均匀的列中显示UL数据

2 个答案:

截图：