使用PHP从mySQL表显示图像/描述

时间:2012-10-19 15:20:58

标签: php html mysql css database

我的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)

请按顺序查看上面的三张图片。

我可以连接&使用'include displayitems.php'显示我的数据库,但是,我希望以4行3列的行显示数据库中的图像。

我该怎么做?

我真的很困惑。

三江源

2 个答案:

答案 0 :(得分:1)

你需要制作一个宽度固定的容器div(400),然后将你的对象放入宽度为100(容器的1/4)的div中,然后从数据库加载每个对象插入图像和文字。见下面的例子。当物体进入时,它们将水平堆叠,一旦空间用完(在5),第5个将进入下一行并继续前进。将其限制为3行必须使用SQL - >限制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>

答案 1 :(得分: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仍然是100px宽,每边有10px的边距(间距),因此它的宽度为100px + 20px。

所以如果你还想要每行4个; 120px x 4 = 480px。因此,480px是“整体”容器的大小。