如何动态地以固定数量的列水平显示列表？

Question

我正在尝试以3列水平显示列表，如果列被填满，它会自动进入新行。我试图使用PHP编码它，但没有得到任何结果。所以，如果有人能提供某种方法使它成为可能，请。我正在附加快照：Image Snapshot

File dbFile;
try {
    dbFile = File.createTempFile("eap-mirror", ".accdb");
    dbFile.deleteOnExit();
    try (Database db = DatabaseBuilder.create(Database.FileFormat.V2010, dbFile)) {
        System.out.println(db.getFileFormat());
    } catch (IOException ioe) {
        ioe.printStackTrace(System.out);
    }
} catch (Exception e) {
    e.printStackTrace(System.out);
} finally {
    System.out.println("Finally...");
}

Answer 1

你可以有2个像这样的循环

for(;$i<$total;)
new row
for($j=0;$j<3;$j++)
$i++
display content 

Answer 2

在PHP中，使用“modulo”，如下所示：

<table>
  <tr>
<?php
$i = 0;
foreach($menu as $item) {
  if($i % 3 == 0) {
     // This will be executed 1 in 3 times.
     echo "</tr><tr>";
  }
  echo "<td>".$item."</td>"
}
?>
  </tr>
</table>

这只是一个例子，这里生成的HTML不一定适合你的代码。

您可以使用CSS代替！

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

<style>
  li {
    display: inline-block;
    width: 33%;
    list-style: none;
  }
</style>

Answer 3

1。垂直列

如果您不介意IE9< compatability，可以使用CSS列

ul {
    -moz-column-count:3;
    -webkit-column-count:3;
    column-count:3;
}

<ul>
    <li>column item 1</li>
    <li>column item 2</li>
    <li>column item 3</li>
    <li>column item 4</li>
    <li>column item 5</li>
    <li>column item 6</li>
    <li>column item 7</li>
    <li>column item 8</li>
    <li>column item 9</li>
</ul>

2。水平排序

如果您希望块以水平顺序显示，从技术上讲，这不是列的问题，但可以使用以下方法实现：

body {
  margin: 0;
}
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  width: 32%;
}

<ul>
  <li>column item 1</li>
  <li>column item 2</li>
  <li>column item 3</li>
  <li>column item 4</li>
  <li>column item 5</li>
  <li>column item 6</li>
  <li>column item 7</li>
  <li>column item 8</li>
  <li>column item 9</li>
</ul>