0

2 列レイアウトのワードプレス ループを作成しましたが、ほぼ問題なく動作しています。問題は、高さが非常に長いコンテンツまたは画像がある場合、レイアウトの問題が発生することです (投稿間に大きなギャップがあります)。

私の 2 列のループは次のようになります。

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

誰かが私の投稿間の「ギャップ」を取り除くための何らかの解決策を提案できますか?

4

1 に答える 1

1

残念ながら、これがCSS フロートの仕組みです。意図したことを達成するために、次のいずれかを実行できます。

于 2013-04-17T12:32:42.363 に答える