CSS：单个图像的定位

Question

我正在建立一个漫画网站，但我无法按照我想要的方式对齐图片。

我要这样做：

• 我正试图连续漫画（蓝色）

但是所有的图像都是相互叠加的：

我认为我的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>';

有谁知道定位单个数据元素（如图像）的最佳方法？ 我应该使用表格还是列表？

谢谢！

Answer 1

我会使用unordeder列表。并且您在同一个地方看到所有图像，因为您已将其位置设置为绝对，并且您没有设置任何坐标。

您可以删除position：absolute，图片应该是行。如果你使用一个unorderer列表，你可以将li放在左边。