阻止列表离开页面底部

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

这样做是为了限制列表包装的高度，从而迫使项目继续向左移动。 请注意，您应该从width中删除UL以允许列保持向左堆积。

请参阅Fiddle here!