阻止列表离开页面底部

Question

我有一个 php foreach 脚本，它将遍历目录中的所有文件并将它们列出，并带有一个文件夹图标和一个文件图标。

列表在检查完所有文件和文件夹之前一直在移动，因此它会离开页面底部。

只是好奇人们认为最简单的方法是什么，让下面的代码在到达页面底部后进入另一列？

foreach (glob("$dir/*") as $filename) {
    //Set the full path and filename
    $path_parts = pathinfo($filename);
    //Set the filename to display
    $itemname = $path_parts['basename'];
    //Remove bullet points from the list
    echo "<ul style='list-style:none'>";
    //If it is a directory, list it. Else do nothing
    if(is_dir($filename)) {
        //Link points back to lister, with new directory
        echo "<li><a href='list.php?dir=".$filename."' style='font-size:18px;'>
        <img src='/site/images/files/folder.png' height='32px' width='32px' border='0' />&nbsp;".$itemname."</a></li>";
    }
    echo "</ul>";
}

感谢人们可以提供的任何建议

编辑

Answer 1

有很多方法可以实现你的目标，完全取决于你想要如何呈现信息：有序、无序、按高度组织的列、按宽度组织的列等。

因此，作为起点，您可以按照以下方式做一些事情：

HTML

<div>
    <ul>
        <li>
            <a href="#" style="font-size:18px;">
                <img src="path_to_image.png" height="32px" width="32px"> Name
            </a>
        </li>
        ...
        <li>
            <a href="#" style="font-size:18px;">
                <img src="path_to_image.png" height="32px" width="32px"> Name
            </a>
        </li>
    </ul>
    <br>
</div>

CSS

/* what you need to pay attention to */
ul {
    list-style-type: none;
    width: 330px;
}
li {
    margin: 0;
    padding: 2px 10px 2px 0;
    width: 100px;
    float: left;
}

/* some styles to links */
a {
    text-decoration: none;
    color: #333;
}

/* clear float */
br {
  clear: left;
}

这样做是为LI 元素设置一个固定宽度，并将其浮动到左侧，因此只要它们并排放置，列就会不断堆积。

UL 宽度限制了您想要的列数！

见小提琴example here!

---

现在，如果您打算防止出现垂直滚动，则需要使用额外的 css 行：

CSS

ul {
    height: 100px;
}

这样做是为了限制列表换行的高度，从而迫使项目继续向左移动。 不要认为您应该从 UL 中删除 width 以允许列继续堆积到左侧。

见Fiddle here!