Bir ForEachLoop içinde yatay div düzen

2 Cevap php

Ben mevcut web sitesinde küçük bir bölümü entegre çalışıyorum, benim sorunum basit gibi görünüyor, ama ben başım çevresinde almak gibi olamaz. İşte ben böyle bakmak istiyorum nasıl:

alt text

Blue = #pagecontainer
Red = #sectioncontainer
Yellow = .post

pagecontainer { height: 100%; width: 900px;}
post container {width: 900px;}
.post {width: 210px;}

Dört mesajlar kullanarak WordPress çekti alıyorsanız:

<?php if (have_posts()) : ?>
<?php query_posts('category_name=Category&posts_per_page=4'); ?>
<?php while (have_posts()) : the_post(); update_post_caches($posts); ?>
    <div class="post">
        <?php the_content() ?>
    </div>
<?php endwhile; ?>

Ileti sabit genişlik, ama zengin bir yükseklik olacak. Sorun altında bir div iterek son yazılan olmadan arasındaki aralayıcıları koyamazsınız, ve ilk ve son div sayfa kabın tosladı çünkü ben kenar boşluklarını kullanmak değildir, değildir.

Muhtemelen gibi bir şey kullanabilirsiniz

.post {margin-right: 20px;}
.post:last-child {margin: 0 !important;}

... Ama bu sadece dağınık görünüyor ve ben oldukça child sözde seçicileri kullanarak önleyeceğini.

Daha düzenli bir çözüm üzerinde herhangi bir fikir?

2 Cevap

Bir $ sayımını kullanabilirsiniz

Gibi bir şey:

    <?php $count = 0; ?>

    <?php while (have_posts()) : the_post(); update_post_caches($posts); ?>

    <?php $count++; ?>

    <?php if ($count < 5) {
         $class = 'post';
    } else {
         $class = 'post-last';
    } ?>

    <div class="<?php echo $class; ?>">
          <?php the_content() ?>
    </div>

    <?php endwhile; ?>

Sonra sadece bir marj var değil 20px marjı ve 'post-son' için CSS de 'post' sınıfı ayarlamak

:last-child Bu ne yazık ki kandırmak ancak yerine, margin-tabanlı çözüm kullanmaya çalışın değil çapraz tarayıcı, eşdeğer negatif değere sağ tarafında ayarlanmış ebeveynin marjı:

.post {margin-right: 20px;}
.secioncontainer {margin-right: -20px;}

Ayrıca .post s arasında-boşluk olacaktır emin olun. Boşluk kalmadan tek bir satırda yazılır böylece biçimlendirme değiştirebilir:

<?php while (have_posts()) : the_post(); update_post_caches($posts); ?><div class="post"><?php the_content() ?></div><?php endwhile; ?>

Veya CSS tekniği gibi kullanın:

.secioncontainer {font-size: 0px;}
.post {font-size: /*your normal value*/;}

etiketler