2

メニュー項目を 4 列に並べ、縦に並べ替え、次のように入力した配列を印刷する必要があります。

ここに画像の説明を入力

従うべきマークアップ構造は次のとおりです (5 項目)。

<ul>
    <li>1</li>
    <li>2</li>
</ul>
<ul>
    <li>3</li>
</ul>
<ul>
    <li>4</li>
</ul>
<ul>
    <li>5</li>
</ul>

私はこのようなことを試してみましたが、上記の例が示すように、最初に行を埋めていないため、うまくいきません:

$cols = 4;
$cnt = count($items);

echo "<ul>";
foreach($items as $i => $item) {
     echo "<li>" . $item->ID . "</li>";
    if(($i + 1)%$cols == 0 && ($i + 1) != $cnt) {
        echo "</ul>\n<ul>";
    }
}
echo "</ul>";

これに関するヘルプをいただければ幸いです。

4

2 に答える 2

3

このようなものは、あなたがやりたいことのトリックを行うはずです. データ配列と必要な列数を入力するだけで、その配列が指定された列数に分割されます

<?php
    $items = array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17);
    $numCols = 4;
    $result = ListArrayVals($items,$numCols);
    echo $result;
    function ListArrayVals($items,$numCols) {
        $minPerRow = floor(count($items)/$numCols);
        $remaining = count($items) % $numCols;
        $colCount = array();
        for ($i = 0;$i<$numCols;$i++) {
            if ($i < $remaining) {
                array_push($colCount,$minPerRow+1);
            } else {
                array_push($colCount,$minPerRow);
            }
        }
        $listString = '';
        $count = 0;
        for ($i = 0;$i<count($colCount);$i++) {
            $listString = $listString . "<ul>";
            for ($j = 0;$j<$colCount[$i];$j++) {
                $listString = $listString . '<li>' . $items[$count] . '</li>';
                $count = $count + 1;
            }
            $listString = $listString . '</ul>';
        }
        return $listString;
    }
?>

echo ステートメントを変更して、HTML タグまたはその周りに必要なものをラップするだけです。

編集修正しました。任意の数の列と入力データに対して機能するようになりました。また、何度も再利用できるように関数にしました。

于 2012-11-17T12:44:16.623 に答える
2

css3 マルチカラム プロパティを試す

<style>
.menu {
  -moz-column-count:4; /* Firefox */
  -webkit-column-count:4; /* Safari and Chrome */
  column-count:4;
}
</style>

<ul class="menu">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>
于 2012-11-17T15:33:58.427 に答える