Question

我对同位素网格有一个问题......大部分时间它都能正确显示。但是当我刷新页面时，有时项目之间的空间会变宽，最后一列会在容器边缘被切掉。该问题随机出现在safari中。像firefox或chrome这样的其他浏览器效果很好。有谁知道为什么会这样？它让我发疯，我无法在任何地方找到任何解决方案......我在下面发布我的代码......

jQuery的：

var grid_filterbar = jQuery('.grid.filterbar').imagesLoaded( function() {
grid_filterbar.isotope({
itemSelector: '.isotope-item',
masonry: {
  percentPosition: true,
  gutter: '.gutter-sizer',
  columnWidth: '.grid-sizer',
}
}); 
});

PHP：

<?php $mitglieder = get_field('kompetenz_mitglieder_hinzufuegen');
   if( $mitglieder ): ?>
      <div class="wrapper-mitglieder">
      <h2 class="spacer"><?php _e("Mitglieder", "Template-Kompetenzen"); ?></h2>

      <span><?php echo facetwp_display( 'facet', 'standort' ); ?></span>

        <?php foreach( $mitglieder as $post): 
                setup_postdata($post);
                $zugehoerige_anwaelte = get_the_ID();
                $str[] = $zugehoerige_anwaelte;
              endforeach; ?>
        <?php $arr = $str; ?>
        <?php wp_reset_postdata(); ?>


        <?php $ausgabe = new WP_Query( array( "post_type" => "anwaelte", "post_status" => "publish", "orderby" => "title", "order" => "ASC", "posts_per_page" => -1, "post__in" => $arr ) ); ?>

          <div class="wrapper-mitglieder--main">
           <div class="grid filterbar facetwp-template">
            <div class="grid-sizer"></div><div class="gutter-sizer"></div>

              <?php while($ausgabe->have_posts()) : $ausgabe->the_post(); ?>
              <?php $profilbild = get_field('anwalt_profilbild_thumb'); ?>

                <div class="lawyer_grid_item--wrapper isotope-item element">
                <a href="<?php the_permalink(); ?>">
                 <div class="lawyer-grid-item--inner">
                 <div class="lawyer-grid-image-wrapper round fullscreen">
                   <?php if ( $profilbild ) {
                       $size = 'thumbnail'; // (thumbnail, medium, large, full or custom size)
                       echo wp_get_attachment_image( $profilbild, $size );
                   } else {
                       $bildpfad = get_stylesheet_directory_uri();
                       echo  '<img src="' . $bildpfad . '/img/avatar_profil.jpg' . '" />';
                   } ?>
                 </div>
                 <?php 
                     $anwalt_titel = get_field('anwalt_titel');
                     $anwalt_vorname = get_field('anwalt_vorname');
                     $anwalt_nachname = get_the_title();
                     echo $anwalt_titel . ' ' . $anwalt_vorname . ' ' . $anwalt_nachname; ?>
                 </div>
                </a>
                </div>
                <?php unset($profilbild); ?>

              <?php endwhile; ?>
            </div>
          </div>
         </div>
    <?php endif; ?>

    <?php wp_reset_postdata();  // IMPORTANT - reset the $post object so the rest of the page works correctly ?>

CSS：

.wrapper-mitglieder{
   width: 100%;
   position: relative;
   height: auto;
   overflow: hidden;
}

.wrapper-mitglieder--main{
   margin-top:30px;
   margin-bottom:35px;
   position: relative;
}

.mitglieder-grid-filter{
   margin-top: 30px;
}

.mitglieder-grid-filter a{
   margin-right: 5px;
   margin-bottom:10px;
}

.wrapper-mitglieder--main .grid-sizer,
.wrapper-mitglieder--main .isotope-item{
   width: 18%;
   text-align: center;
}

.wrapper-mitglieder--main .gutter-sizer{
   width:2.5%;
}

.wrapper-mitglieder--main .lawyer_grid_item--wrapper{
   position: relative;
}

.wrapper-mitglieder--main .lawyer_grid_item--wrapper .lawyer-grid-item--inner{
   width: 100%;
   position: relative;
}

.wrapper-mitglieder--main .lawyer_grid_item--wrapper .lawyer-grid-item--inner .lawyer-grid-image-wrapper{
   height: 65px;
   width: 65px;
   margin: 0 auto;
   margin-bottom:10px;
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   -o-filter: grayscale(100%);
   filter: grayscale(100%);
   transition: all 0.2s ease-in-out;
   -webkit-box-shadow: 0 0 0 0 rgba(0,0,0,0);
   -moz-box-shadow: 0 0 0 0 rgba(0,0,0,0);
   box-shadow: 0 0 0 0 rgba(0,0,0,0);
}

.wrapper-mitglieder--main .lawyer_grid_item--wrapper:hover .lawyer-grid-item--inner .lawyer-grid-image-wrapper{
   -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   -ms-filter: grayscale(0%);
   -o-filter: grayscale(0%);
   filter: grayscale(0%);
   transition: all 0.2s ease-in-out;
   -webkit-box-shadow: 5px 5px 14px 3px rgba(0,0,0,0.07);
   -moz-box-shadow: 5px 5px 14px 3px rgba(0,0,0,0.07);
   box-shadow: 5px 5px 14px 3px rgba(0,0,0,0.07);
   -webkit-transform: scale(1.05);
   -moz-transform: scale(1.05);
   -ms-transform: scale(1.05);
   -o-transform: scale(1.05);
   transform: scale(1.05);
}

.wrapper-mitglieder--main .lawyer_grid_item--wrapper .lawyer-grid-item--inner{
   font-family:'DIN Next W01 Regular';
   font-size: 14px;
   line-height: 16px;
   min-height: 135px;
   color: rgba(51, 51, 51, 0.80);
   transition: all 0.2s ease-in-out;
}

.wrapper-mitglieder--main .lawyer_grid_item--wrapper:hover .lawyer-grid-item--inner{
   color: #C34100;
   transition: all 0.2s ease-in-out;
}

任何帮助都会很棒......谢谢！

同位素物品有时会占用太多空间并被切断

0 个答案: