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

Question

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

如何为所有这些制作 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; }

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