javascript - Div + JQuery 不清除

Question

我在我的网站上使用 JQuery Masonry，它在页面上运行良好，除了最后一个单元格没有被清除。这是我正在使用的代码:

<script type="text/javascript" src="scripts/jquery.masonry.min.js"></script>        
<script type="text/javascript">
$(document).ready(function(){
  $('#pageMain').masonry({
    // options
    itemSelector : '.post'
  });
});
</script>

<div id="pageMain">
    <?php
    <div class=\"section halfSection post\">
        <div class=\"sectionInner\">
            <img class=\"photo190\" src=\"content/news/$article_photo\" alt=\"\" />
            <div class=\"cover190\"></div>
            <div class=\"shadow190\"></div>
            <div class=\"newsTitle\"><strong>$article_title</strong></div>
            <div class=\"newsArticle\">$article_article ...<br><a class=\"newsLink\" href=\"article.php?id=$article_id\">Full Story</a></div>
        </div>
    </div>

    { x 20 }

    ?>
    <div class="clearLeft"></div>
</div>

.post{
position: relative;
float: left;
}
.clearLeft{
clear: left;
}

知道问题出在哪里吗？

Answer 1

您不需要清除它们，因为砌体会根据其内容的高度将其容器的高度设置为绝对 PX 值。里面的元素也是绝对定位的，而不是 float 的。如此清晰不会有任何影响。

只需将您想要的内容放在 <div id="pageMain"> 之后(之外)的网格下，您应该没问题:)

如果你发现它们确实是 float 的并且需要被清除，我会猜测是砌体没有被初始化。检查您的 JS 控制台是否有错误。由于无论如何这是很好的后备行为，您可以将 overflow: hidden 应用于 #pageMain 的 CSS 以清除其内容。