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

Question

my php link to database: http://i163.photobucket.com/albums/t315/smc22_2007/pic1.png

My guess at how to show images from mysql database: http://i163.photobucket.com/albums/t315/smc22_2007/pic2.png

what I want it to look like: hxxp://i163.photobucket.com/albums/t315/smc22_2007/pic3.png (unable to post 3 hyperlinks, pls change xx to tt)

Please view the three pictures above in that order.

I can connect & display my database by using an 'include displayitems.php', however, I want to display the images from my database in row of 4 rows of 3 columns.

How do I do this?

I'm getting really confused.

Thankyou

Answer 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>

The "margin: 0 10px;" is basically saying have no margins on the top or bottom, but have 10px on each side of the container. This means that the container div will be 100px wide still, with 10px of margin (spacing) on each side, therefore making it 100px + 20px wide.

So if you still want 4 in each row; 120px x 4 = 480px. Thus, 480px is the size of the 'overall' container.