我的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列的行显示数据库中的图像。
我该怎么做?
我真的很困惑。
三江源
答案 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是“整体”容器的大小。