Question

任何人都对空格有一个想法，我正在使用基础框架的wordpress进行while循环？

    <div class="large-8 columns">

    <?php query_posts(array('category_name' => 'revista', 'paged' => get_query_var('paged'), 'posts_per_page' => 9 )); ?>

    <?php while ( have_posts() ) : the_post(); ?>

        <article class="boletin large-4 columns" style="min-height:1px;">       

            <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>

            <h2><a href="<?php the_permalink(); ?>"><?php the_title();?></a></h2>   

        </article>              

    <?php endwhile; ?>

    </div><!-- /large-8 -->

    <?php get_sidebar(); ?>

</div>

这是页面（请使用 CTRL + F5 查看最新版本）

http://www.aoa.cl/revistas/

Answer 1

发生这种情况的原因是你的瓷砖没有相同的高度。您可以使用Foundation Equalizer来解决此问题。并留下代码，你有它。我仍然会将大到小改为

<article class="small-12 medium-6 large-4 columns">

以获得更好的响应结果。基金会是移动优先的。首先是小屏幕的代码，而较大的设备将继承这些样式。根据需要自定义更大的屏幕。

如果您希望手机和桌面上只有三列，请执行以下操作：我每隔三行添加一行。也改变了大到小（大屏幕继承小于小继承大）。

<div class="small-8 columns">
<?php $count=0;?>
<?php query_posts(array('category_name' => 'revista', 'paged' => get_query_var('paged'), 'posts_per_page' => 9 )); ?>

<?php while ( have_posts() ) : the_post(); ?>
    <?php if ($count % 3 == 0): ?>
    <div class="row">
    <?php end_if; ?>
        <article class="boletin small-4 columns" style="min-height:1px;">       
            <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>

            <h2><a href="<?php the_permalink(); ?>"><?php the_title();?></a></h2>   

        </article> 
    <?php if ($count % 3 == 2): ?>
    </div>
    <?php end_if; ?>  
    <?php $count++; ?>           

<?php endwhile; ?>

</div><!-- /small-8 -->

<?php get_sidebar(); ?>

基础和Wordpress空白

1 个答案: