在 PHP 中插入一定数量的 DIV 后插入清除修复 - Insert Clear Fix After Certain Amount of DIVs in PHP

我正在努力解决一个问题，我想有人可以帮助我。我正在尝试在一定数量的div 容器之后插入一个清晰的div。现在在这个例子中，我已经设法让它工作，在前三个之后放置一个清晰的div，但我希望它插入每组 3 个div 之后，具体取决于我设置的特色文章数量（3、6、9 等）。

$featured_articles = get_field('featured_articles', false, false );
    $id = $featured_articles[0];
    //var_dump();
    $numberOfArticles = count($featured_articles);
    //var_dump($featured_articles);
    echo "<div class='container'>";
        echo "<div class='row-fluid'>";
            for ($i=0; $i < $numberOfArticles; $i++) { 
                if ($featured_articles) {
                        $id = $featured_articles[$i];
                        //var_dump($featured_articles);
                        if ( has_post_thumbnail($id) ) {
                            echo "<div class='span4'>";
                            echo "<article class='post__holder recipes'>";
                            echo "<a href='".get_permalink($id)."' class='image'>";
                                echo get_the_post_thumbnail( $id, 'medium-thumb' );
                                $image_large = wp_get_attachment_image_src( get_post_thumbnail_id($id), 'large');
                            echo "</a>";
                        }
                        echo "<a href='".get_permalink($id)."'><h3>".get_the_title($id)."</h3></a>";
                        echo "<div class='starRating'>";
                        echo "<img src='".home_url()."/wp-content/themes/BUZZBLOG-theme/images/StarRating.svg' alt='Testergebnis'>";
                        echo "<div class='bar' style='width:".get_field('rating', $id)."%'></div>";
                        echo "</div>";/** end starrating **/
                        echo "<a href='".get_permalink($id)."'><div class='readmore-button'>Zum Testbericht...</div></a>";
                        echo "</div>"; 
                        echo "</article>";
                        if ($i >= 2) {
                            if($i == 2) { 
                                echo "<div class='clearfix'>";
                            }
                            if ($i == $numberOfArticles) {
                                echo "</div>";
                            }
                        }

                }
            }
            echo "</div>";
            echo "</div>";

试试这个它将检查 3 的倍数并放置一个 clearfixdiv

另外不要忘记从 1 到 $i <= $numberOfArticles开始$i

$featured_articles = get_field('featured_articles', false, false );
    $id = $featured_articles[0];
    //var_dump();
    $numberOfArticles = count($featured_articles);
    //var_dump($featured_articles);
    echo "<div class='container'>";
        echo "<div class='row-fluid'>";
            for ($i=1; $i <= $numberOfArticles; $i++) { 
                if ($featured_articles) {
                        $id = $featured_articles[$i-1];
                        //var_dump($featured_articles);
                        if ( has_post_thumbnail($id) ) {
                            echo "<div class='span4'>";
                            echo "<article class='post__holder recipes'>";
                            echo "<a href='".get_permalink($id)."' class='image'>";
                                echo get_the_post_thumbnail( $id, 'medium-thumb' );
                                $image_large = wp_get_attachment_image_src( get_post_thumbnail_id($id), 'large');
                            echo "</a>";
                        }
                        echo "<a href='".get_permalink($id)."'><h3>".get_the_title($id)."</h3></a>";
                        echo "<div class='starRating'>";
                        echo "<img src='".home_url()."/wp-content/themes/BUZZBLOG-theme/images/StarRating.svg' alt='Testergebnis'>";
                        echo "<div class='bar' style='width:".get_field('rating', $id)."%'></div>";
                        echo "</div>";/** end starrating **/
                        echo "<a href='".get_permalink($id)."'><div class='readmore-button'>Zum Testbericht...</div></a>";
                        echo "</div>"; 
                        echo "</article>";
                       if($i%3==0) {
                                echo "<div class='clearfix'></div>";
                            }

                }
            }
            echo "</div>";
            echo "</div>";

你可以

这样做：-

for ($i=0; $i < $numberOfArticles; $i++) { 
  // your code
  if($i%3==0) echo '<div class="clearfix"></div>';
}

您可以使用

array_chunk()函数将数组划分为每组 3 个成员，并且可以迭代每个数组。

PHP 是一种嵌入在 HTML 中的服务器端脚本语言。

因此，请在代码中使用此功能，而不是在代码中随处编写echo "html element"。

我认为您错过了div元素的匹配。因为<article>必须在<div class='span4'>之前关闭，但在您的代码中它不存在。

$featured_articles = get_field('featured_articles', false, false );
    $dividedIn3GroupsEach = array_chunk($featured_articles, 3);    
    foreach ($dividedIn3GroupsEach as $array) {
        ?>
        <div class='container'>
            <div class='row-fluid'>
                <?php
                foreach ($array as $key => $value) {
                    $id = $featured_articles[$key];
                    if (has_post_thumbnail($id)) {
                        ?>
                        <div class='span4'>
                            <article class='post__holder recipes'>
                                <a href='<?php echo get_permalink($id); ?>' class='image'>
                                    <?php
                                    echo get_the_post_thumbnail($id, 'medium-thumb');
                                    $image_large = wp_get_attachment_image_src(get_post_thumbnail_id($id), 'large');
                                    ?>
                                </a>
                            <?php } ?>
                            <a href='<?php echo get_permalink($id); ?>'><h3><?php echo get_the_title($id); ?></h3></a>
                            <div class='starRating'>
                                <img src='<?php echo home_url() ?>"/wp-content/themes/BUZZBLOG-theme/images/StarRating.svg' alt='Testergebnis'>
                                <div class='bar' style='width:<?php echo get_field('rating', $id); ?>%'></div>
                            </div>
                            <a href='<?php echo get_permalink($id); ?>'><div class='readmore-button'>Zum Testbericht...</div></a>
                        </article>
                    </div>
                    <?php }
                ?>
</div> <!-- row-fluid end -->
</div> <!-- container end -->
                <div class='clearfix'></div>
            <?php } ?>

我希望这对你有所帮助。