兩列（「gap」）佈局問題

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