jquery - divをdivの下部にとどまらせるのに問題があります

Question

サンプルコード

<section id="loadGallery" style="overflow:hidden;">

<?php foreach ($this->imgs as $p)  
{ ?>
<article>
<a href="<?= $C->SITE_URL ?>pics/<?= $p->pic_id ?>">
<img src="/uploads/<?= $p->img ?>"/>
</a>
</article>
<?php }?>

<div class="more" id="<?= $p->pic_id ?>">load more</div>

</section>

記事にはfloat：left、画像の高さ：150pxがあります

最初に11個のimgをロードし、.moreがクリックされたら、最後のIDを取得して、さらにimgをロードします。.moredivを削除してから、新しい.moredivに変更します。

現在、ajaxが成功したとき、私は$（'＃loadGallery'）。append（e）;を使用しています。

問題は、.more divが画像の下になく、最後のimgの隣にあることです。

Answer 1

フロートがリセットされるように、フロートをクリアする要素を追加する必要があります

<div style="clear:both;"></div>

Answer 2

.more { clear: both; }トリックを行う必要があります。クリア/スタイリングの目的で空のマークアップを使用することはお勧めしません