Горизонтальное расположение div внутри foreachloop

Question

Я пытаюсь встроить небольшой раздел в существующий веб-сайт, моя проблема кажется простой, но я не могу разобраться с этим. Вот как я хочу, чтобы это выглядело так:

альтернативный текст http://img691.imageshack.us/img691/329/layouth.jpg

Синий = #pagecontainer
Красный = #seconcontainer
Желтый = .post

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

Четыре сообщения извлекаются из WordPress с помощью:

<?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; ?>

Посты будут фиксированной ширины, но разной высоты. Проблема в том, что я не могу поставить промежуточные проставки без последнего сообщения, помещающего div внизу, и не могу использовать поля, потому что первый и последний div сталкиваются с контейнером страницы.

Возможно, я мог бы использовать что-то вроде

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

... но это только кажется грязным, и я бы лучше не использовал дочерние псевдоселекторы.

Есть идеи по более аккуратному решению?

Answer 1

Вы можете использовать $ count

Что-то вроде:

    <?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; ?>

Затем просто установите свой класс 'post' в CSS так, чтобы поле имело 20px, а для параметра 'post-last' не было поля

Answer 2

Попробуйте использовать решение на основе маржи, но вместо трюка :last-child, который, к сожалению, не является кросс-браузерным, установите для поля родителя с правой стороны эквивалентное отрицательное значение:

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

Также сделайтеубедитесь, что между .post s не будет пробелов.Вы можете изменить разметку так, чтобы она записывалась в одну строку без пробелов:

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

Или использовать технику CSS, например:

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