php - 砌体 CSS 命令

Question

我正在从我的数据库中拉出我的图像，并尝试将它们排序到横向列表而不是上下列表。有谁知道如何实现这一点？

Screenshot of Current Output

我的 CSS:

#myContent {
    -moz-column-count: 3;
    -moz-column-gap: 0px;
    -webkit-column-count: 3;
    -webkit-column-gap: 0px;
    column-count: 3;
    column-gap: 0px;
    width: 900px;
}

#myContent img{
    display: inline-block;
    margin-bottom: 0px;
    width: 90%;
}

我的 HTML 和 PHP

<ul id="myContent"> 
<div id="postedComments">

<?php 

$result = mysql_query("SELECT * FROM stories ORDER BY pid ASC limit 0 , 5"); 

while($data = mysql_fetch_array($result)) {
$pid = $data['pid'];
$photo_url = $data['photo_url'];
echo "<div class='postedComment' id=\"$pid \">

<img src='$photo_url'>

<p>pid: $pid</p>

<hr />

</div>" ;

 }
?>

</div>
</ul>

Answer 1

在您希望位于一行中的图像上使用“float:left”。确保在所有图像之后使用类似这样的东西，这样图像之后的 HTML 才会起作用:

.clear{
clear:both;
height:1px;
margin-bottom:-1px;
}

<div>
//Your pictures
</div>
<div class="clear"></div>