foreachloop中的水平div布局

我想在现有的网站上整合一小段，我的问题看起来很简单，但我似乎无法摆脱它的困扰。这里是我希望它看起来像：foreachloop中的水平div布局

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

...但是这似乎只是乱，我宁愿避免使用儿童伪选择。

整数解决方案的任何想法？

来源

2010-05-11 theorise

您可以使用$计数

喜欢的东西：

使得它被写在一行中没有空格，则可以修改标记

<?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'为不有一个保证金

来源

2010-05-11 13:23:01

冠军！谢谢。比必须使用负边界更好。 – theorise 2010-05-11 13:41:30

尝试使用基于利润率的解决方案，但不是: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*/;}

来源

2010-05-11 12:33:23 nkrkv

负边际是一个不错的主意，迄今为止我发现的最好的解决方案。 .post {margin-left：20px;} .secioncontainer {margin-left：-20px;宽度：920px;} 谢谢。 – theorise 2010-05-11 13:02:51

foreachloop中的水平div布局

回答

相关问题