php - CSS: Positioning of individual images

Question

I am building a comics website, but am having trouble aligning the images the way I want.

I'm going for this:

• I'm trying to get the comics in a row like this (blue)

But all the images are coming out on top of each other:

I thought my CSS was correct...

*{
 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>';

Does anyone know the best way to position individual data elements (like the images)? Should I be using a table, or a list?

Thanks!

Answer 1

我会使用无序列表。您会在同一个位置看到所有图像，因为您已将它们的位置设置为绝对位置并且您没有设置任何坐标。

您可以删除 position:absolute 并且图像应该成行。如果您使用无序列表，您可以将 li 浮动到左侧。