Я получаю ошибку в моем дизайне, когда я использую разные циклы для разных категорий. Просмотрите предварительный просмотр здесь . Сообщение «WISHWISHWISH: WHEN IN STOCKHOLM» находится под той же категорией, что и «FASHIONTOAST: SPACE CAMP», но тег «blogger equitit for dagen» выходит в начало страницы на последнем упоминании! Он должен попасть под изображение для сообщения, как это делается на «WISHWISHWISH: WHEN IN STOCKHOLM». Почему это происходит?
Мои коды:
<?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; }