1

ページに出力する変数に保存しているMySQLクエリがあります。順序付けされていないリストにデータがありますが、左に浮かぶ3つの順序付けられていないリストを使用してデータを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つの等しい列、最初の列に1つの追加要素、または1番目と2番目の列に1つの追加要素を含めることができます。

それを説明するために、コードで何を変更する必要がありますか？

4

2 に答える 2

1

これはうまくいきます：

  1. $split最長の列の長さに設定
  2. 行には、1 要素だけ長い 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 に答える