foreachloop中的水平div佈局

Question

我想在現有的網站上整合一小段，我的問題看起來很簡單，但我似乎無法擺脫它的困擾。這裏是我希望它看起來像：

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

藍= #pagecontainer
紅色= #sectioncontainer
黃色=。員額

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

4個員額正從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中設置'post'類，使邊距爲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*/;}