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

尝试使用基于保证金的解决方案，但遗憾的是，不是: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*/;}

Answer 2

您可以使用$ 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; ?>

然后只需在CSS中设置'post'类，使其边距为20px，“post-last”为没有边距

foreach循环中的水平div布局

2 个答案: