0

我想要的只是以一种非常简单的方式显示我的图像，就像谷歌搜索图像一样。我有图像，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>

代码：

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

1 回答 1

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

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

于 2012-12-17T10:02:58.300 回答