0

私が望むのは、画像のグーグル検索と同じように、非常に簡単な方法で画像を表示することだけです。私は画像を持っていwidth:71px; height:59pxます...そして、画像のタイトルにしたい画像の下にcenter、このように複数の画像を1行に表示し、次に2行目に表示し、次の行に表示します。

CSSこのすべてを作る方法は？

データベースから画像を表示するために今まで持っていたものは次のとおりですが、現時点では、画像とタイトルのすべてを「1列」に表示し、並べて表示しません。

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

1 に答える 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 に答える