0

我有这个循环，它基本上在页面上显示一个带有图像的块，该类gallerypic在右侧有 20px 的边距，它也有规则float:left;，问题是每次创建第三个 div 时它都会从一个新的线，因为边距将它推到那里。所以理想情况下，我希望每三篇文章没有保证金，并应用一个 divgallerypicright或其他东西。

我想知道有人对此有解决方案吗？可能是一种更简单的方法，它可以在第三次发生时简单地阻止保证金发生？我需要另外两个的边距，因为它在柱子之间创造了一个整齐的间隙。

<?php 
            $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
            $archive_query = new WP_Query('cat=14&showposts=14&paged=' . $paged);
            $id = get_the_ID();

while ($archive_query->have_posts()) : $archive_query->the_post(); ?>

                     <div class="events">
        <div class="gallerypic"><div class="limerickguideblockheader"><p><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?>
        </div>
        <div class="gallerypiccontainer"><a href="<?php the_permalink(); ?>" >
         <?php echo get_the_post_thumbnail( $id, 'gallery-thumb', $attr ); ?> </a></div>
         </div> 
  </div>
            <?php endwhile; ?>

编辑：一张图片描绘了 1000 个字，这里是到目前为止的链接，有三个帖子...... http://limerickfc.hailstormcommerce.com/cms/?page_id=2466

如果可能的话，通过 CSS 的方法会更好。干杯阿德里安

4

4 回答 4

4

试试下面的代码。

<style>
.gallerypicright {
  margin: 0;
}
</style>
...
<?php
$count = 0;
while ($archive_query->have_posts()) : $archive_query->the_post(); 
  $count++;
  $third_div = ($count%3 == 0) ? 'gallerypicright' : '';
?>
...
<div class="gallerypic <?php echo $third_div; ?>">
于 2012-10-05T09:55:22.443 回答
2

如果你想要一个纯 CSS 解决方案，你可以尝试使用

.gallerypic:nth-child(3n + 1) {
    margin:0;
}

n是每个元素都会上升的计数器。计数器 ( n) 从 开始，0但页面上的元素从 开始1，因此3n + 1每个3 * n + 1元素的方法，例如：

元素1 (3 * 0 + 1)、4 (3 * 1 + 1)、7 (3 * 2 + 1) 等。

此解决方案仅在 CSS3 中可用，因此较旧的浏览器将没有它。（见：http ://caniuse.com/#search=nth-child ）。

请注意，:nth-child计算所有子项，因此您应该将事件分组在一个 div 中：

<div class="container">
    <div class="gallerypic">...</div>
    <div class="gallerypic">...</div>
    <div class="gallerypic">...</div>
</div>
于 2012-10-05T10:14:39.107 回答
0

您必须在循环之后计算您的帖子，您必须将模块按 3 来计算帖子总数并在给定帖子中应用正确的课程，例如

if ($cnt%3 == 0){ $class = 'right'}

于 2012-10-05T10:20:12.583 回答
0

您可能会尝试在容器上添加平衡负右边距的技巧，所以在您的情况下，也许

div.events { margin-right: -20px; }

或者，如果您可以处理稍微不完整的浏览器支持（我认为仅 IE9+，在其他浏览器中更好），也许可以使用 nth-child：

.gallerypic:nth-child(3n+3) { margin-right: 0px; }
于 2012-10-05T10:20:49.327 回答