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

Question

我想在 localhost 应用程序中动态显示图像及其描述（悬停时）。

我得到一个垂直输出：

但我希望图像水平显示（在一定程度上），如下所示：

我尝试了以下

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;
}

Answer 1

尝试更改 .img-wrap 如下：

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

}

Answer 2

您可以添加display: inline-block到.img_wrap：

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

或者你可以使用float: left. 但在这种情况下，请确保您clear: both在最后一项之后。

http://jsfiddle.net/tRRVv/