CSS：個別圖像的定位

我正在建立一個漫畫網站，但我無法按照我想要的方式對齊圖像。CSS：個別圖像的定位

我要爲這樣的：

我試圖讓一排漫畫像這樣（藍色）

enter image description here

但所有的圖像都來了互相頂上：

enter image description here

我以爲我的CSS是正確的......

*{ 
margin: 0; 
padding: 0; 
} 


body { 
background: gray; 
text-align: center; 
} 

#wrapper { 
width: 960px; 
margin: 0 auto; 
text-align: left; 
background: white; 
} 


#comics { 
/*top, right, bottom, left*/ 
margin: 50px 100px 50px 100px; 
} 

.comicBG { 
position: absolute; 
border: 1px dotted black; 
background: #99FF33; 
padding: 25px; 
    }

PHP：

echo '<td>'; 
echo '<span class="comicBG"><a href="./templates/viewcomic.php?id=' . $row['imgid'] . '"> 
<img src="' . $thumbpath.$row['imgthumb'] . '"/></a>' . 
'<br /><a href="./templates/viewcomic.php?id=' . $row['imgid'] . '">' .  $row['imgtitle'] . '</a></span>'; 
echo '</td>';

有誰知道個人數據元素（如圖像）的位置的最佳方式？我應該使用表格還是列表？

謝謝！

來源

2012-10-21 Growler

我會使用一個unordeder列表。而且你可以在同一個地方看到所有的圖像，因爲你已經將它們的位置設置爲絕對的，並且你沒有設置任何座標。

您可以刪除位置：絕對，圖像應該是行。如果您使用unorderer列表，則可以將li浮動到左側。

來源

2012-10-21 16:20:33 mariogl

float：left working！但是，爲什麼要在表上使用無序列表？我是否仍然可以控制連續的圖像？（例如，我不希望單個頁面上的所有6個圖像都在單個行中，或者它將從頁面運行） – Growler

語義上，表格用於表格數據。你只是有一個圖像列表。如果包裝具有寬度並且圖像（或li）被漂浮，則當它們在一行中沒有空間時，它們將構建新的行。 – mariogl

謝謝馬里奧。但UL默認每行2列。我以爲這是因爲父元素的寬度太小，所以我放大了它，並且它仍然設置爲每行2列。包裝時可以手動更改嗎？ – Growler

CSS：個別圖像的定位

回答

相關問題