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

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

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

砌体CSS订单

2 个答案: