使用css定位div标签

Question

I created a php page that contains a div tag that contains a PHP code that get links from database, then shows an images, So now when it view the images in the div tag it shows the images vertically but I want it to shows me the images horzintilly, that's my code

<div class="pppi" style="width: 780px; height: 318px;overflow: auto; overflow-y: auto;">
 <?php
 $msqlq = mysql_query("SELECT * FROM `pictures` WHERE `to` = '$id'");
 while($fetchmsq = mysql_fetch_array($msqlq)){
 $pic = $fetchmsq['name'];
 $pics = "<div class='justprofile'><img src='uploaded/$pic'>&nbsp;&nbsp;";
 echo $pics;
 }
 ?>
</div>  

So that shows me like this

but I want it to look like this

How can I fix this problem, when I tried the css using top , right and position:absolute all the images was located to one position and no spaces between them.

Answer 1

In the HTML output from your PHP, you forgot to close the <div> element. Change the $pics line to this:

$pics = "<div class='justprofile'><img src='uploaded/$pic'></div>";

In your CSS, do:

.justprofile {
    float: left;
}

You may add space between the images by specifying a margin, like this:

.justprofile {
    float: left;
    margin-right: 1em;
}