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值。里面的物品绝对定位，而不是浮子。如此明确不会产生任何影响。

只需将您想要的内容放在<div id="pageMain">之后（{}}之外的网格中，您应该没问题。）

如果你发现它们肯定是浮动的并且需要清除，我猜想砌体还没有被初始化。检查JS控制台是否有错误。由于这是良好的后备行为，您可以将overflow: hidden应用于#pageMain的CSS以清除其内容。

Div + JQuery不清除

1 个答案: