0

私は自分のDBから画像を取り出して、それらを並べ替えて、上下ではなく横に並べようとしています。これを達成する方法を知っている人はいますか？

現在の出力のスクリーンショット

私の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>
4

2 に答える 2

0

1行にしたい画像に「float：left」を使用します。すべての画像の後に必ず次のようなものを使用して、画像の後の HTML が機能するようにします。

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

<div>
//Your pictures
</div>
<div class="clear"></div>
于 2012-11-19T16:46:04.180 に答える
0

この問題に遭遇する可能性のある他の人は、 http ://philipbjorge.github.com/Infinite-Social-Wall/ を使用してみてください。

フィリップはこれを達成するのに素晴らしい仕事をしました。あなたが上級開発者であれば、彼のソース ファイルをダウンロードして、彼のロジックを調べることができます。または、ソーシャル配列が呼び出されているセクション全体を削除し、データベースを使用して新しい項目を設定することもできます。

于 2012-11-19T21:26:24.413 に答える