0

ディレクトリ内のすべてのファイルを調べて、フォルダ用のアイコンとファイル用のアイコンでそれらを一覧表示するphpforeachスクリプトがあります。

リストはすべてのファイルとフォルダをチェックするまで続くので、ページの一番下から外れます。

以下のコードがページの下部に到達したら別の列に分割するのが最も簡単な方法だと人々が考えることに興味がありますか？

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

人々が提供できるアドバイスに感謝します

エド

4

1 に答える 1

0

目標を達成する方法はたくさんありますが、すべて情報をどのように表示するかによって異なります。順序付け、順序付けなし、高さで整理された列、幅で整理された列などです。

したがって、出発点として、この線に沿って何かを行うことができます。

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幅はあなたが望む列の数を制限します！

ここでフィドルの例を参照してください！

ここに画像の説明を入力してください

ここで、垂直スクロールが表示されないようにする場合は、追加のcss行を使用する必要があります。

CSS

ul {
    height: 100px;
}

これは、リストラップの高さを制限して、アイテムを左に移動し続けるようにすることです。列が左に積み重なっていくように、widthそこからを削除する必要があることに注意してください。UL

ここでフィドルを参照してください！

ここに画像の説明を入力してください

于 2012-05-11T13:01:26.517 に答える