Php Wordpress:frontpage上不同类别的不同循环

当我对不同的类别使用不同的循环时，我的设计中出现了一个bug。“WISHWISHWISH:WHEN IN STOCKHOLM”的帖子与“FASHIONTOAST:SPACE CAMP”属于同一类别，但“blogger Guide 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>

---

允许列在读卡器外观内部断开。将此添加到CSS中：

。读卡器外观{
-莫兹柱内折：避免；
-webkit列内部中断：避免；
内柱断裂：避免；
}

---

而且你在支持它的浏览器上也很出色。

但是“FASHIONTOAST:SPACE CAMP”是最老的一个，但它现在站在最新的旁边，这是不对的？你目前使用的CSS列不知道什么是新的或旧的，什么是好的或坏的。它只是把你所有的

分成三列，在那里你认为是个好地方，而不是在你认为是个好地方。如果您想设置哪些文章要放在哪里，您需要重新考虑您的设计，可能需要创建自己的专栏，或者自己开始打破专栏。更准确地说，它将所有内容放在

#columns

中，并将其分成三列，只考虑不要在具有类

.pin

的内部破坏。您的

.reader look

没有，因此CSS将其破坏，并使文本显示在第二列中。我的代码使

.reader看起来

并没有为了防止它而分栏，因此，由于CSS认为这是呈现

#columns

的三栏的最佳方式，所以整篇文章都上移到了第二栏。这对我来说很难写在评论（或答案）中在stackoverflow上，由于您没有足够的积分，我们无法聊天。但也许我们可以使用quakenet？到这里，添加一个缺口并加入频道#stackoverflow。在我离开之前，我会给你15分钟的时间进去。经过长时间的聊天（仍然很激烈），jQuery将负责整个shebang！

    #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;
}