使用砌体布置物品

我正在使用波旁及其附带的网格框架整洁地创建一个网站，并希望将砌体整合到布局区域以显示新闻文章。使用砌体布置物品

我想我已经把所有东西都设置了正确，但是看起来砌体的计算有些偏离，因为应该并排坐的物品只是将一个物品叠放在另一个下面。

对于我的布局，我使用Neat的标准@include span-columns() mixin以及文章元素上的flexbox，以便我可以在文章中布局元素。

我已经包含了grid-sizer“助手” DIV允许砌体了解每列应该多大，按砌筑文档，所以我的HTML标记如下：

<div class="o-row"> 
    <div class="o-contain"> 
     <div class="news__listing js-articles"> 
      <div class="u-grid-sizer js-grid-sizer"></div> 

      <article <?php post_class('c-article c-article--listed js-articles__item'); ?>> 
       <header class="c-article__header"> 
        <?php if (has_post_thumbnail()) { 
         $image = wp_get_attachment_image_src(get_post_thumbnail_id(get_the_ID()), 'large'); ?> 

         <img class="c-article__image" src="<?php echo $image[0]; ?>" alt="<?php the_title(); ?>" /> 
        <?php } ?> 

        <h2 class="c-article__title"><?php the_title(); ?></h2> 
       </header> 

       <div class="c-article__summary s-cms-content"> 
        <?php the_excerpt(); ?> 
       </div> 

       <footer class="c-article__footer"> 
        <a class="c-button c-button--gamma" href="<?php the_permalink(); ?>">Read blog post</a> 
       </footer> 
      </article> 
     </div> 

     <div class="news__sidebar c-sidebar"> 
      <?php get_sidebar(); ?> 
     </div> 
    </div> 
</div>

的CSS我“同时使用父容器和物品M上本身如下：

.news__listing { 
    @include media($m-up) { 
     @include span-columns(8); 
     @include omega(2n); 
    } 
} 

.c-article { 
    .news__listing & { 
     margin-bottom: $space; 

     @include media($m-up) { 
      @include span-columns(6); 
      @include omega(2n); 
      @include display(flex); 
      @include flex-direction(column); 
      @include flex-shrink(0); 
     } 
    } 
} 

.u-grid-sizer { 
    .news__listing & { 
     @include media($m-up) { 
      @include span-columns(6); 
      @include omega(2n); 
     } 
    } 
}

和JS用于调用和执行砌体是简单地：

jQuery(document).ready(function($) { 
    $('.js-articles').masonry({ 
     columnWidth: '.js-grid-sizer', 
     itemSelector: '.js-articles__item' 
    }); 
});

我是否在做任何明显错误的事情？如果我从我的标记中删除js-articles类，那么文章元素就会正确排列，只要它们在页面上显示为两页，尽管在每行“文章”下面都有大量边距，这正是我试图使用的砌体删除。

来源

2015-09-27 Alex Ryans

你有没有想过这个？ –

我设法让砌体与Neat一起工作，使用与你描述的相同的布局。 Neat所面临的主要问题是，因为砌体可以移动，Neat处理排水沟（欧米茄等）并不能真正与砌体结合，而排水沟则以砌体的方式进入。（通常Neat使用'span-columns'值来关闭位于最后一列的项目的正确的排水沟;由于不能保证项目将出现在哪一列，砌体不再起作用。以下是可能有助于获得使用砌体的整洁布局的步骤：

而不是默认显示，请在显示表中使用span-columns。（例如，span-columns(6, table);）这将消除排水沟并确保一切都是砌体的预期宽度。如果你这样做，你不需要设置omega。
然后，您可以通过稍微作弊并为每个砌体元素添加一个装订线的填充宽度来实现排水效果 - 例如， padding-right: $gutter（尽管您可能需要调整容器元素的宽度，或者稍微微调它的位置 - 例如，通过给它margin-left: $gutter/2; - 补偿Neat通常会移除的最后一列上的额外的排水沟）。
根据我的经验，如果你有不同宽度的砌体物品，你只需要一个grid-sizer元素。如果所有项目的宽度都相同，则应该只用itemSelector选项就可以初始化砌体。

来源

2016-01-19 16:22:29

使用砌体布置物品

回答

相关问题