Question

我有这个循环，它基本上在页面上显示一个包含图像的块，类gallerypic在右边有一个20px的边距，它也有规则float:left;，问题是每次创建第三个div时它都会从一个新行开始，因为边距正在推动它。因此，理想情况下，每三个帖子我都不想要保证金，并应用div gallerypicright或其他东西。

我想知道有人有解决方案吗？可能是一个更简单的一个，它只是在第三个时间点阻止边际发生？我需要其他两个边距，因为它在帖子之间创造了一个整齐的差距。

<?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的方法会更好。干杯阿德里安

Answer 1

尝试以下代码。

<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; ?>">

Answer 2

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

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

n是一个适用于每个元素的计数器。计数器（n）从0开始，但页面上的元素从1开始，因此3n + 1表示每个3 * n + 1元素，例如：< / p>

元素 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>

Answer 3

你必须在循环之后计算你的帖子，你需要将模块减去3到post＆amp;在给定的帖子中应用正确的课程，例如

if（$ cnt％3 == 0）{$ class ='right'}

Answer 4

您可以尝试在容器上添加平衡负右边距，因此在您的情况下，也许

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

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

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

wordpress循环，每隔三个帖子应用一些新东西

4 个答案: