php - 砌体 CSS 顺序

Question

我正在从我的数据库中提取我的图像并尝试将它们排序到列表中而不是上下。有谁知道如何实现这一目标？

电流输出截图

我的 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>

Answer 2

谢谢大家，对于其他可能遇到此问题的人，请尝试使用http://philipbjorge.github.com/Infinite-Social-Wall/

菲利普在实现这一目标方面做得很好。如果您是高级开发人员，您可以下载他的源文件并查看他的逻辑。或者，您可以删除调用社交数组的整个部分，并仅使用数据库填充新项目。