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）

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

我可以使用“include displayitems.php”连接并显示我的数据库，但是，我想以 4 行 3 列的行显示我的数据库中的图像。

我该怎么做呢？

我真的很困惑。

谢谢

4

2 回答 2

1

您需要制作一个具有固定宽度（400）的容器 div，然后将您的对象放入宽度为 100（容器的 1/4）的 div 中，然后从插入图像和文本的数据库中加载每个对象。请参见下面的示例。当对象进来时，它们将水平堆叠，一旦空间用完（在 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 仍然是 100px 宽，每边有 10px 的边距（间距），因此它是 100px + 20px 宽。

因此，如果您仍然希望每行有 4 个；120 像素 x 4 = 480 像素。因此，480px 是“整体”容器的大小。

于 2012-10-19T15:41:24.767 回答