Wordpress：首页上不同类别的不同循环

Question

当我为不同的类别使用不同的循环时，我的设计中出现了错误。 Check out live preview here。 “WISHWISHWISH: WHEN IN STOCKHOLM”帖子与“FASHIONTOAST: SPACE CAMP”属于同一类别，但“blogger suit for dagen”标签位于最后提到的帖子的页面顶部！它应该放在帖子的图片下方，就像“WISHWISHWISH：在斯德哥尔摩时”一样。为什么会这样？

我的代码：

<?php get_header(); ?>
<div id="columns">
<div id="frontpage" class="clearfix">   

    <?php 
    query_posts('posts_per_page=9' . '&orderby=date'); 
    while ( have_posts() ) : the_post(); 
    if ( in_category( 'Streetstyle' )) {
        if(condition){ ?>
            <div <?php post_class('pin'); ?>>
                <div class="reader-look">
                    <a href="<?php the_permalink(); ?>"><h1><?php the_title(); ?></h1>
                    <?php if ( has_post_thumbnail() ) {
                        the_post_thumbnail();
                    } 
                    ?> 
                    <div class="clearfix"><tag>Streetstyle</tag></div>
                    </a>
                </div>
            </div>
        <?php }
    } elseif ( in_category( array( 'blogger-outfit' ) )) { //du kan også bruke komma her eks: 'streetstyle', 'ukategorisert'
        if(condition){ ?>
                <div class="reader-look">
                    <a href="<?php the_permalink(); ?>"><h1><?php the_title(); ?></h1>
                    <?php if ( has_post_thumbnail() ) {
                        the_post_thumbnail();
                    } 
                    ?> 
                    <div class="clearfix"><tag>Blogger Outfit For dagen</tag></div>
                    </a>
                </div>

        <?php }
     }
     elseif ( in_category( array( 'video' ) )) { //du kan også bruke komma her eks: 'streetstyle', 'ukategorisert'
        if(condition){ ?>
                <div class="reader-look">
                    <a href="<?php the_permalink(); ?>"><h1><?php the_title(); ?></h1>
                    <?php if ( has_post_thumbnail() ) {
                        the_post_thumbnail();
                    } 
                    ?> 
                    <div class="clearfix"><tag>Video</tag></div>
                    </a>
                </div>

        <?php }
      }
     elseif ( in_category( array( 'tips' ) )) { //du kan også bruke komma her eks: 'streetstyle', 'ukategorisert'
        if(condition){ ?>
                <div class="reader-look">
                    <a href="<?php the_permalink(); ?>"><h1><?php the_title(); ?></h1>
                    <?php if ( has_post_thumbnail() ) {
                        the_post_thumbnail();
                    } 
                    ?> 
                    <div class="clearfix"><tag>Fashion tips</tag></div>
                    </a>
                </div>
        <?php }
      }
     else {
        if(condition){ ?>
        <a href="<?php the_permalink(); ?>">
            <div <?php post_class('pin'); ?>>
                <h1>
                    <?php the_title(); ?>
                </h1>
                <?php if ( has_post_thumbnail() ) {
                    the_post_thumbnail();
                } 
                the_content(' '); ?> 
            </div>
        </a>
    <?php } }
    ?>          
    <?php endwhile;
    // Reset Query
    wp_reset_query(); ?>
</div>
</div>

风格：

    #wrapper #frontpage {
    position: relative;
    left: 15px;
}
#wrapper #columns {
    -moz-column-count: 3;
    -moz-column-gap: 40px;
    -moz-column-fill: auto;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    column-count: 3;
    column-gap: 15px;
    column-fill: auto;
}
#wrapper #columns .pin { 
    -moz-column-break-inside: avoid; 
    -webkit-column-break-inside: avoid; 
    column-break-inside: avoid; 
    display: inline-block; 
    width: 360px;
    font: 100 12.5px 'Helvetica';
    line-height: 18px;
    color: #3a3a3a;
    margin-bottom: 20px;
}
.reader-look h1  {
    text-shadow: white 1px 1px 0px;
    margin-bottom: 10px;
    font: 100 24px 'Lato';
    color: #333;
    text-transform: uppercase;
    text-decoration: none;
}
.reader-look h1 a {
    color: #333;
    text-decoration: none !important;
}
.reader-look img {
    width: 360px;
    height: auto !important;
}
tag {
    background: #000;
    color: #FFF;
    padding: 10px;
    display: inline-block;
    font-weight: bold;
    text-transform: lowercase;
    font: 100 16px 'Lato';
    -webkit-font-smoothing: subpixel-antialiased;
    margin-bottom: 20px;
}
#wrapper #columns .pin .more-link {
    margin-top: 10px;
    color: #000;
}
#wrapper #columns .pin img {
    width: 360px;
    height: auto;
}
#wrapper #columns .pin iframe {
    width: 380px !important;
    height: auto !important;
}
#wrapper #columns .pin h1  {
    text-shadow: white 1px 1px 0px;
    margin-bottom: 10px;
    font: 100 24px 'Lato';
    color: #333;
    text-transform: uppercase;
}
#wrapper #columns .pin h1 a {
    color: #333;
    text-decoration: none;
}
#wrapper #columns .pin a {
    color: #333;
    text-decoration: none;
}
#wrapper .pin .heading {
  text-align:center;
  border-bottom:1px solid #dddddd;
  margin-bottom: 20px;
}
#wrapper .pin .heading h1 {
  display:inline-block;
  font: 100 21px 'Lato';
  position:relative;
  top: 12px;
  background:#fff;
  padding:0 12px;
}

Answer 1

您允许列在阅读器内部中断。将此添加到您的 CSS：

.reader-look{
    -moz-column-break-inside: avoid; 
    -webkit-column-break-inside: avoid; 
    column-break-inside: avoid; 
}

而且你在支持它的浏览器上表现不错。