0

これに似たトピックがあることは知っていますが、私のものは少し違うと思います。私がやっていることは、データベースからのデータを含む div のコンテンツをエコーすることです。それらは順序付きリスト要素の一部です。最初の 10 個のアイテムが読み込まれ、ユーザーが [さらに読み込む] をクリックし、さらに 10 個の読み込みが行われます。現在、それらは順序付きリストとして1つの列にあります...エコーされたdivを2つ並べて並べたいです。順序付きリストにはajax呼び出しによってhtmlコンテンツが追加されるため、順序付きリストとして保持する必要があると思います。jQuery masonry を使用してみましたが、最初の 10 の div を並べて作成することに成功しましたが、DOM が更新されなかったため、次の 10 はできませんでした...そして、それが masonry のしくみです。それで、CSSでこれを行うことができるかどうか疑問に思っています。とにかく...ここに私のコードがあります：

<body> 
<div id='container'>
   <ol class="row" id="updates">
<?php
  //query DB for content
?>
   <li> <?php echo "<div style='font-size:12px; position:relative; left:300px;>
        //some other divs with content from DB
        </div><br>"; ?> </li>
        <?php } ?>
   </ol>
<div id="more" style="margin-top: 20px;"> <a  id="<?php echo $id; ?>" 
     class="load_more" href="javascript:void(0);">Show More</a> </div><br/>
</div>
</body>

それが私の最初のボディコードです。ajax によって呼び出される add_more_content.php では、形式は同じで、同じ div スタイルを返し、順序付きリスト ID "updates" に追加されます。そして、これは私がこれのために持っているCSSです:

ol.row {
  list-style:none
}
ol.row li {
  position:relative;
  padding:8px;
}
#container {
  width:600px
}
.load_more {
  position:relative;
  left:220px;
  display:block;
}

では、エコーされた div をコンテナ div の幅がいっぱいになるまで並べて作成することは可能ですか? 前もって感謝します！

4

1 に答える 1

0

インライン表示を使用すると、それらは単独で整列するはずです（li要素と内部div要素の両方で試しました）が、投稿されたコードにタイプミスがあることがわかりましたので、それが問題を引き起こしているかどうかはわかりません.

たとえば、内部 div のインライン スタイルで ' を閉じていません...また、スタイリングにクラスを使用することをお勧めします。そうすることで、要素が css を共有していることを確認でき、次のことができるようになります。 Firebug（または他のブラウザの同等のもの）を使用して実行時に編集します...

「もっと見る」ボタンの目的のための編集: 追加の html がボタンの動作を壊している場合は、コンテナの外に移動して位置を保つことができます。親コンテナを追加して、自己更新 div と更新ボタン...このようにして、コンテンツのスタイルと配置を正しく保つことができます。

于 2013-02-11T15:23:03.580 に答える