Div + JQuery Not Clearing

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 к CSS #pageMain, чтобы очистить его содержимое.