html - Css无法并排列出框

Question

我有一个简单的代码，我想列出画廊中的图像。我想显示这些图像

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

Answer 1

添加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
}

演示