Question

我创建了一个双列布局wordpress循环，它的工作几乎好。问题是，如果我有很长的内容或高大的图像，我会遇到一些布局问题（我的帖子之间有很大的差距）。

我的两个列循环如下所示：

<?php 
    $show_all_posts = '';
    $col = 1; //Let's create first column
    /*Let's add pagination to post page and static page*/
    if ( get_query_var('paged') ) {
    $paged = get_query_var('paged');
    } elseif ( get_query_var('page') ) {
    $paged = get_query_var('page');
    } else {
    $paged = 1;
    }

    query_posts(array(
     'paged' => $paged, 
     'post__not_in' => $show_all_posts//added blank value variable in order to show posts if template is         
    ));                   //assigned as Front Page!!
    if(have_posts()) : while(have_posts()) : the_post(); 


    ?>
<?php if ($col == 1) echo '<div class="row">';//If column 1 create first row ?>
<?php if ($col == 2) echo '<div class="row2">';//If column 2 create second row ?>
    <div <?php post_class('col'.$col); ?>>
    <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
        <div class="entry"> 
                <div class="featured_img">
                <?php the_post_thumbnail();
      echo '<div class="featured_caption">' . get_post(get_post_thumbnail_id())->post_excerpt . '</div>';?>
     </div><!--/featured_img-->
        <?php  // let's enable more link on pages...
        global $more;
        $more = 0;
        ?>
            <?php the_content(); ?>
            <p class="postmetadata">
            <?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php  the_author(); ?><br/><?php the_tags(); ?><br/>
            <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?> <?php edit_post_link('Edit', ' &#124; ', ''); ?>
            </p>
        </div>
    </div>

    <?php /*Enable Two Column Layout*/
        if($col==1) {
        $col=2;
        echo "</div>";
        }
        else if($col==2)  {
        $col=1;
         echo "</div>";
        }

    endwhile; ?>
    <div class="clear"></div>
    <div class="navigation">

    <?php
    global $wp_query;
    $big = 999999999; // need an unlikely integer

    echo paginate_links( array(
    'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
    'format' => '?paged=%#%',
    'current' => max( 1, $paged ),
    'total' => $wp_query->max_num_pages
    ) );
        ?>
</div>
<?php endif; ?> 
<?php wp_reset_query();?>       
</div><!--/blogs--> 
</div><!--/blogswrapper-->

CSS看起来像这样：

 /*START styles for two column layout*/
 .row { clear: left; }
 .row2 { clear: right; }
 .col1 { width: 262px;float:left;display:block;position:relative;margin-right:8px;}
 .col2 { width: 262px;float:right;display:block;}
 /*END styles for two column layout*/

有人可以建议某种解决方案来消除我的帖子之间的“差距”吗？

Answer 1

恐怕这就是CSS floats的工作方式。为了达到您的目的，您可以执行以下操作之一：

为每个帖子设置固定的高度。
使用column-count CSS3属性，但您必须注意not all browsers will support it这一事实。看看这个Example。
使用jQuery Masonry

两列（“间隙”）布局问题

1 个答案: