foreachloop中水平div布局
foreachloop中水平div布局
提问于 2010-05-11 20:09:20
我正在尝试在现有网站上整合一个小部分，我的问题看起来很简单，但我似乎无法理解它。下面是我想要的样子：
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，这看起来很混乱，我宁愿避免使用子伪选择器。
对更整洁的解决方案有什么想法？
回答 2
Stack Overflow用户
回答已采纳
发布于 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’类的边距为零
Stack Overflow用户
发布于 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*/;}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2810493
复制相关文章
相似问题