使用ACF获取游艇自定义文章时如何实现表格每3个单元格自动换行

最优方案：使用CSS Grid布局（强烈推荐） #

CSS Grid天然支持等高单元格、自定义行列数量、响应式调整，完全匹配你的需求，无需使用复杂的table结构或JS脚本处理换行逻辑。

步骤1：清理冗余代码 #

删除PHP循环中输出的.yacht-spacer分隔单元格相关代码，无需单独生成分隔元素，通过CSS即可实现分隔效果。

步骤2：替换CSS样式 #

将原有table相关样式替换为Grid布局样式：

#page .the-latest-listings {
    border-top: 1.3px solid rgba(28,34,64,.3);
    border-bottom: 1.3px solid rgba(28,34,64,.3);
    margin-top: 60px;
    display: grid;
    /* 桌面端默认3列 */
    grid-template-columns: repeat(3, 1fr);
    /* 列间距匹配原分隔宽度 */
    column-gap: 50px;
    /* 行间距可按需调整 */
    row-gap: 30px;
    width: 100%;
}
.latest-yacht-wrapper {
    /* 单元格右侧分隔线 */
    border-right: 1px solid rgba(28,34,64,.3);
}
/* 每行最后一个单元格去掉右侧分隔线 */
.latest-yacht-wrapper:nth-child(3n) {
    border-right: none;
}
.single-latest-yacht-container {
    padding: 78px 0;
    /* 确保容器占满单元格高度，实现等高效果 */
    height: 100%;
}
/* 平板端适配：每行2个 */
@media (max-width: 992px) {
    #page .the-latest-listings {
        grid-template-columns: repeat(2, 1fr);
    }
    .latest-yacht-wrapper:nth-child(3n) {
        border-right: 1px solid rgba(28,34,64,.3);
    }
    .latest-yacht-wrapper:nth-child(2n) {
        border-right: none;
    }
}
/* 移动端适配：每行1个 */
@media (max-width: 576px) {
    #page .the-latest-listings {
        grid-template-columns: 1fr;
    }
    .latest-yacht-wrapper {
        border-right: none;
        border-bottom: 1px solid rgba(28,34,64,.3);
    }
    .latest-yacht-wrapper:last-child {
        border-bottom: none;
    }
}

备选方案：PHP直接输出分好行的原生table结构 #

如果你需要坚持使用原生table实现，可以在PHP循环时添加计数器直接生成正确的行列结构，无需JS后续处理：

<table class="the-latest-listings">
    <?php 
    $args = array(
        'post_type' => 'yachts',
        'posts_per_page' => 9,
        'orderby' => 'date',
        'order' => 'DESC',
        'meta_query' => array(
            array(
                'key' => 'sale_or_charter',
                'value' => 'sale',
            )
        ),
    );
    $my_posts = new WP_Query($args);
    $count = 0;
    $total_posts = $my_posts->found_posts;
    if ( $my_posts->have_posts() ) : ?>
    <tr class="listings-table-row">
        <?php while ( $my_posts->have_posts() ) : $my_posts->the_post();
        $count++;
        ?>
        <td class='latest-yacht-wrapper'>
            <div class="single-latest-yacht-container">             
                <div class="latest-yacht-image">
                    <?php $image = get_field( "preview_yacht_image", get_the_ID() );?>
                    <a href="<?php the_permalink(); ?>">
                        <img src="<?php echo esc_url($image['url']); ?>" title="<?php echo esc_attr($image['title']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
                    </a>
                </div>
                <div class="latest-yacht-blue-container">       
                    <div class="sale-status-tab">
                        <p><?php echo the_field( "sale_or_charter", get_the_ID() );?></p>
                    </div>  
                    <h4><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h4>
                    <div class="teaser-details">    
                        <?php if( get_field('price', get_the_ID() ) ){ ?>
                            <p class="latest-price">EUR <?php echo get_field( "price", get_the_ID() );?></p>
                            <p class="divider">|</p>
                        <?php }; ?> 
                    </div>      
                </div>
            </div>
        </td>
        <?php 
        // 非最后一个卡片才输出分隔单元格
        if($count != $total_posts): ?>
        <td class="yacht-spacer">
            <div class="vertical-line"></div>
        </td>
        <?php endif; ?>
        <?php 
        // 每3个卡片结束后换行
        if($count %3 == 0 && $count != $total_posts): ?>
        </tr><tr class="listings-table-row">
        <?php endif; ?>
        <?php endwhile; ?>
    </tr>
    <?php 
    wp_reset_postdata();
    endif;
    ?>
</table>

原有jQuery方案失效原因 #

之前的代码中每个卡片对应2个td元素（卡片td+分隔td），3个卡片合计对应6个td，你按每3个td切分的逻辑与实际结构不匹配，因此无法得到正确的换行效果。

内容的提问来源于stack exchange，提问作者Mr Toad