Горизонтальная компоновка div в foreachloop

Question

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

alt text http://img691.imageshack.us/img691/329/layouth.jpg

синий = #pagecontainer
Красный = #sectioncontainer
Желтый = .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

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

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

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

Затем просто установите свой класс «пост» в CSS, чтобы иметь размер 20px и «post-last», чтобы не имеют запас

Answer 2

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

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

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

<?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*/;}