砌體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

回答

相關問題