我正在尝试在现有网站上整合一个小部分,我的问题看起来很简单,但我似乎无法理解它。下面是我想要的样子:
alt text http://img691.imageshack.us/img691/329/layouth.jpg
Blue = #pagecontainer
Red = #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;}
...but,这看起来很混乱,我宁愿避免使用子伪选择器。
对更整洁的解决方案有什么想法?
发布于 2010-05-11 21:23:01
您可以使用$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’类的边距为零
发布于 2010-05-11 20:33:24
尝试使用基于边距的解决方案,但不要使用不能跨浏览器的:last-child
技巧,而是将parent在右侧的边距设置为等效的负值:
.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*/;}
https://stackoverflow.com/questions/2810493
复制相似问题