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; }

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

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

1 个答案: