1

ギャラリーのように画像を一覧表示したい簡単なコードがあります。このような画像を表示したい

ただし、divはy軸に昇順で出力されます。どうすればこれを修正できますか？私のphpとhtmlのコードはここにあります

<div id="gallerycontent">
        <?php for($x=0;$x<10; $x++){ ?>
        <div class="galleryitem">
        <img src="images/SamplePackSpread.png"/>
        </div>
        <?php }?>
    </div>

私のCSSコードはここにあります

#gallerycontent{
    float: left;
    max-width: 685px;
    padding: 10px 5px 5px 5px;
    text-align: justify;
}

#gallerycontent .galleryitem{
    width: 250px;
    height: 250px;
    background:url('../images/screen.png');
    background-repeat: no-repeat;
    padding: 5px 5px 5px 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    clear: both;
}
#gallerycontent img{
    float: left;
    width: 90%;
    height: 90%;
    margin: 2.5%;
}
#gallerycontent ul{
    padding-left: 50px;
    list-style-type:square;
}
4

1 に答える 1

2

display:inline-blockに追加.galleryitem

#gallerycontent .galleryitem{
    width: 250px;
    height: 250px;
    background:url('../images/screen.png');
    background-repeat: no-repeat;
    padding: 5px 5px 5px 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    clear: both; display:inline-block
}

デモ

于 2012-12-10T08:37:36.620 に答える