0

フォルダーからいくつかの画像を取得し、きちんと見栄えのする方法で表示しようとしています。そのために、PHP を使用してフォルダーから画像を取得しています。

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/custom.css">
<title>Load Images from a folder</title>
</head>
<body>

<?php

$files = glob("*.JPG");
$fileCount = count(glob("*.JPG"));

echo '<ul id = \"gallery\">';
for ($i = ($fileCount -1); $i >= (0); $i--) {
    echo '<li> <img src="' . $files[$i] . '" alt="image" /> </li>';
}
echo '</ul>';

?>
</body>
</html>

これに伴い、以下のcssを使用しています。(下) custom.css ファイルは、(上) index.php ファイルと同じフォルダーにあります。

#gallery li {
    display: inline;
    list-style: none;
    max-width: 250px;
    max-height: 250px;
    float: left;
    margin: 0px 20px 20px 0px;
    text-align: center;
}

しかし、それは機能していません。画像を上下に並べて（すべての画像に黒丸を付けて）取得しますが、期待どおりに画像を並べて表示することはありません。

css ファイルの名前を次のテキストで .php に変更しようとしました。

<?php "header("Content-type: text/css");" ?>

上部にあり、「li」に「id=gallery」でタグ付けされていましたが、それも役に立ちませんでした。

ここで何が欠けていますか？

4

2 に答える 2

2

display: inline要素がfloat、height / width、marginsなどを尊重しないようにします。フロートを使用する場合は、を削除するだけdisplay: inlineです。それはそれらを期待通りに流すはずです。

それでも機能しない場合は、ブラウザの開発ツールをチェックして、スタイルが適用されていること、および他の場所で他のスタイルによって上書きされていないことを確認してください。

スタイルがまったく適用されていない場合は、以下を確認してください。

  1. スタイルシートを見つけています。先頭のスラッシュは、サイトがルートディレクトリから検索するように強制します。それがあなたのcssファイルがある場所でない場合、それはそれを見つけるつもりはありません。
  2. あなたのPHPは正しいHTMLを書いています。一重引用符で囲まれている場合は二重引用符をエスケープする必要はありません（二重引用符で囲まれている場合は一重引用符をエスケープする必要もありません）。id=\"gallery\"と同じではありませんid="gallery"。
于 2013-03-05T19:12:14.267 に答える
0

あなたのIDは間違っています、あなたはこれを持っているべきです：

echo "<ul id='gallery'>";

それ以外の

echo '<ul id = \"gallery\">';
于 2013-03-05T19:13:29.460 に答える