在获取图像及其描述时没有得到合适的输出

I want to display images and their description(on hover) dynamically in a localhost application.

I am getting a vertical output:

but I want the images to be show horizontally (to a certain extent), like this:

I tried the following

PHP

    <?php
$c = mysql_connect("localhost", "abc", "xyz");
mysql_select_db("root");
$q     = "select * from product";
$qc    = mysql_query($q);
$count = 0;
while ($ans = mysql_fetch_array($qc)) {
    if ($count == 0 || $count == 1 || $count == 2) {

        $title = $ans[1] . " " . $ans[2];
        print '<div class="img-wrap">';
        print "<img id='display_img' src='products/$ans[8]'width=300 height=200 title='$title'>";
        print '<div class="img-overlay">';
        print '<h4>' . $title . '</h4>';
        print '<p>' . $ans[9] . '</p>';
        print '</div>';
        print '</div>';
    }
    $count++;
    if ($count == 3) {
        print "<br />";
        $count = 0;
    }
}
?>

CSS

.img-wrap {
    height:200px;
    position:relative;
    width:300px;
    margin:10px;
}
.img-overlay {
    background-color:#000;
    bottom:0;
    color:#fff;
    height:200px;
    width:300px;
    opacity:0;
    position:absolute;
    z-index:1000;
    transition-duration:0.5s;
    cursor:pointer;
}
.img-overlay h4, .img-overlay p {
    padding:0 10px;
}
.img-wrap:hover .img-overlay {
    opacity:0.75;
    transition:opacity 0.5s;
}
b {
    background-color:#aa490e;
    color:#fff;
    font-size:36px;
    padding: 0 15px;
    padding-left:65px;
    padding-bottom:25px;
    font-family:"Courier New", Courier, monospace;
}

Try changing .img-wrap as following:

.img-wrap
{
float:left;
clear:none;
height:200px;
position:relative;
width:300px;
margin:10px;

}

You can add display: inline-block to .img_wrap:

.img-wrap {
    ...
    display: inline-block;
}

Or you can use float: left. But in this case make sure you clear: both after the last item.

http://jsfiddle.net/tRRVv/