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

Question

I have created a two column layout wordpress loop and it is working almost good. The problem is that if I have really long content or image with large height I am getting some layout issues (having a large gap between my post's).

My two column loop looks like this:

<?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 looks like this:

 /*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*/

Can someone suggest some kind of a solution for removing a "gap" between my posts?

Answer 1

I am afraid this is how CSS floats work. In order to achieve what you intend, you can do one of the following:

• Have a fixed height for each of your posts.
• Use the column-count CSS3 property, but you will have to take care of the fact that not all browsers will support it. Look at this Example.
• Use jQuery Masonry