砌体CSS订单

我从我的数据库拉我的图像，并尝试将它们排序列出，而不是上下。有谁知道如何做到这一点？砌体CSS订单

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

来源

2012-11-16 Hector

很多代码已被弃用/不推荐使用'center'和'br'。尝试剥离所有东西，只是“浮动：左边”图像。这将使他们都对齐，当他们不适合，去下一行 – Andy

好吧，刚刚更新我的PHP到mysql_fetch_array，剥离了CSS并添加了浮动：左;但结果是没有对准下一行 – Hector

他们不会一致，除非你用砖石（jQuery插件），或添加容器 – Andy

yourThanks人，为别人谁可能会遇到这个问题，请尝试使用http://philipbjorge.github.com/Infinite-Social-Wall/

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

来源

2012-11-19 21:26:24 Hector

使用 “浮动：左” 你想成为一个单一的行中的图像。确保所有的图像后使用这样的事情，所以图像之后你的HTML将功能：

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

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

来源

2012-11-19 16:46:04 TNCodeMonkey

回答

相关问题