如何使用css和php一起使用？

我想從一個文件夾中取出一些圖像，並以整潔和可視的方式顯示它。爲此，我使用PHP從文件夾中獲取圖像。如何使用css和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");" ?>

在頂部和標記的「禮」與「ID =畫廊」，但這並沒有幫助。

我在這裏錯過了什麼？

來源

2013-03-05 coder_learner

你怎麼在開發工具看？ – SLaks 2013-03-05 19:09:22

您不需要在單引號字符串中使用雙引號。這可能是你的問題。 – Bojangles 2013-03-05 19:11:14

也許是一個愚蠢的評論，但你確定要''custom.css'而不是'custom.css'嗎？ – ChrisW 2013-03-05 19:11:36

display: inline將使該元素無法兌現float，height/width和margin等內容。如果你要使用浮動，只需刪除display: inline。這應該會讓他們按預期流動。

如果這仍然不起作用，請檢查瀏覽器的開發人員工具，以確保您的樣式正在得到應用，並且它們未被其他某種其他樣式覆蓋。

如果並不是在所有的應用的樣式，檢查以下內容：

它找到樣式表。前導斜槓迫使站點從根目錄查看。如果這不是你的css文件的地方，它不會找到它。
您的PHP正在編寫正確的HTML。用雙引號包裝時，不需要使用雙引號（也不需要在雙引號中使用單引號）。 id=\"gallery\"與id="gallery"不一樣。

來源

2013-03-05 19:12:14 Shauna

感謝您的建議。我檢查了開發者工具，它根本沒有應用css。然後我刪除了custom.css之前的斜線。然後它開始應用樣式表。 'display：inline'不會影響任何內容。另外，對於圖像相關的樣式，我必須在'img {}'下將'max-height'和'max-width'放在css文件中。 – 2013-03-06 01:47:38

你的ID是不對的，你應該有這樣的：

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

代替

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

來源

2013-03-05 19:13:29 jcho360

謝謝！這實際上使得CSS被檢測到。 – 2013-03-06 01:50:05

太棒了！我建議你使用firebug來調試html，css和JS代碼 – jcho360 2013-03-06 13:55:32

如何使用css和php一起使用？

回答

相關問題