从数据库中按顺序显示带有标题的图像

Question

我想要的只是以一种非常简单的方式显示我的图像，就像在谷歌搜索图像中一样。我的图像带有width:71px; height:59px ...，在图像下我想center 图像的标题，并以这种方式在一行中显示多个图像，然后在第二行中显示下一行一个。

如何为所有这些制作CSS？

这是我到目前为止所拥有的，用于显示数据库中的图像，但此时，它将我的图像和我的标题全部显示在“一列”中，而不是并排显示。

PHP 代码：

<div class="thumb">

        <?php
        $sql_res=mysql_query("SELECT * FROM content WHERE category =      
                    'thumb'   ORDER BY uid ASC LIMIT 25");
        while($row=mysql_fetch_array($sql_res)){
        $fname=$row['link'];
        $lname=$row['title'];
        $img=$row['img'];
        $categorie=$row['category'];
        $str = '<a href="' . $row['link'] . '.php">' . substr($row  
['title'],0,11)  . '</a>';?>
        <a href="<?php echo $fname ?>.php"><img src="http://www.website.ro/
images/<?php echo $img; ?>.jpg"/><?php echo $str; ?></a><?php } ?>

</div>

CSS 代码：

.thumb{
width:71px;
float:left;
margin: 0px 0px 0px 5px;
text-align:center;
}

Answer 1

为了在一行上显示多张图片并使其看起来不错，您需要确保所有图片及其标题的宽度和高度都相等。

因此，您需要一个容器 (div) 来保存单个图像（图像和标题）的内容，然后将该 div 向左浮动并在右侧留有边距。

<div class='container'>
  <img src='..' alt='image' />
  <div>Image title</div>
</div>

风格：

.container { width:81px; text-align:center; float:left; margin:0px 10px 10px 0px; padding:5px 0 5px 0; }
.container img { width:71px; height:51px; display:block }
.container div { overflow:hidden; width:100%; height:20px; }

现在你可以像这样将每张图片放在一个块中，它会填满页面，其中每张图片+标题都具有相同的宽度和高度，因此它会以漂亮的行和列显示