0

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

2 に答える 2

0

次のように .img-wrap を変更してみてください。

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

}
于 2013-07-02T18:08:58.940 に答える
0

に追加できdisplay: inline-blockます.img_wrap:

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

または、 を使用できますfloat: left。ただし、この場合clear: both、最後の項目の後に確認してください。

http://jsfiddle.net/tRRVv/

于 2013-07-02T18:16:32.023 に答える