0

データベースへの私の php リンク: http://i163.photobucket.com/albums/t315/smc22_2007/pic1.png

mysql データベースから画像を表示する方法についての私の推測: http://i163.photobucket.com/albums/t315/smc22_2007/pic2.png

どのように表示したいか: hxxp://i163.photobucket.com/albums/t315/smc22_2007/pic3.png (3 つのハイパーリンクを投稿できません。xx を tt に変更してください)

上の3枚の写真を順番に見てください。

「include displayitems.php」を使用してデータベースに接続して表示できますが、データベースの画像を 4 行 3 列で表示したいと考えています。

どうすればいいですか？

私は本当に混乱しています。

ありがとうございました

4

2 に答える 2

1

固定幅 (400) のコンテナ div を作成し、幅 100 (コンテナの 1/4) の div にオブジェクトを配置し、DB から各オブジェクトをロードして画像とテキストを挿入する必要があります。以下の例を参照してください。オブジェクトが入ってくると、それらは水平に積み重ねられ、スペースがなくなると (5 で)、5 番目は次の行に移動して続行します。3 行に制限するには、SQL --> LIMIT 0, 12; を使用する必要があります。

コード全体を書かなくても、これで何をすべきかの良いアイデアが得られるはずです。

<div style="width:400px;">

  <div style="width:100px;display:inline-block;">
    <div class="image"><img src=""></div>
    <div class="description">Lorem Ipsum</div>
  </div>

  <div style="width:100px;display:inline-block;">
    <div class="image"><img src=""></div>
    <div class="description">Lorem Ipsum</div>
  </div>

  <div style="width:100px;display:inline-block;">
    <div class="image"><img src=""></div>
    <div class="description">Lorem Ipsum</div>
  </div>

  <div style="width:100px;display:inline-block;">
    <div class="image"><img src=""></div>
    <div class="description">Lorem Ipsum</div>
  </div>

</div>
于 2012-10-19T15:37:39.990 に答える
1 
<div id='overall'>
<?php
$query = "select * from UFPProducts";
$result = mysql_query ($query, $connect);

while($row = mysql_fetch_array($result)) {

?>

    <div class='container'>
        <div class="image">
            <?php echo "<img src='".$row['Image']."' />"; ?>
        </div>
        <div class="text">
            <?php echo "<p>".$row['Description']."</p>"; ?>
        </div>
    </div>

    <?php

 }

 ?>
 </div>

 <style type="text/css">

 #overall {width:480px;}
 .container {width:100px; height:150px; float:left; display:inline; margin: 0px 10px; }
 .image {width:100px; height:100px;}
 .text {width:100px; height:50px;}

 </style>

「余白: 0 10px;」基本的には、上下にマージンがなく、コンテナの両側に 10px があると言っています。これは、コンテナ div の幅が 100 ピクセルのままで、両側に 10 ピクセルのマージン (間隔) があるため、幅が 100 ピクセル + 20 ピクセルになることを意味します。

したがって、各行に 4 が必要な場合は、次のようになります。120 ピクセル x 4 = 480 ピクセル。したがって、480px は「全体的な」コンテナのサイズです。

于 2012-10-19T15:41:24.767 に答える