Question

我在我的Wordpress网站上使用过同位素，并且没有显示内联元素的问题。

我已将每个网格元素设置为宽度为25vw，高度为25vw。

在大屏幕尺寸的初始页面加载中，我可以看到我的网格项目4。

当我减小浏览器宽度时，元素会缩小，但是我只能看到水平显示的3个项目。

请帮我在所有屏幕尺寸上显示4个项目。

    // init Isotope
    var $grid = $('.grid').isotope({
        itemSelector: '.element-item',
    });

   .single-artist-container {
    display: inline-block;
    height: 25vw;
    width: 25vw;
    background-size: cover;
    vertical-align: middle;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: #fff;
    left:auto;
    top: auto;
  }
    .artist-feed .overlay {
     background: rgba(0, 0, 0, 0.7);
     height: 100%;
     width: 100%;
   }
   .artist-info {
   margin-left: auto;
   margin-right: auto;
   text-align: center;
   padding-top: 40%;
   color: #fff;
   }

<div class="artist-feed">
        <div class="grid">
                    <?php
                        $artistloop = new WP_Query( array( 'post_type' => 'artist', 'posts_per_page' => -1, 'orderby'=>'title','order'=>'ASC') );
                     if ( $artistloop->have_posts() ) :
                            while ( $artistloop->have_posts() ) : $artistloop->the_post();
                            $lineup_image = fx_get_meta('lineup_image');
                     ?>
                        <div class="single-artist-container element-item" data-days="<?php echo                     $days; ?>" style="background-image: url(<?php echo $feature_image; ?>);">
                        <a href="<?php the_permalink(); ?>">
                            <div class="overlay">
                                <div class="artist-info">
                                <h2><?php the_title(); ?></h2>
                                <h4><?php echo $country ;?></h4>
                                </div>
                        </div>
                        </a>
                </div>
                    <?php endwhile;
                endif;
            wp_reset_postdata();
                ?>
        </div>

Answer 1

尝试设置

.element-item--width2 { width: 25%; }

您可以参考同位素文件here。

同位素元素不以内联方式显示

1 个答案: