Question

我正在尝试安排div，如下图所示：

到目前为止，我一直尝试根据变量和计数器输出pull-left pull-right来做到这一点，如下所示：

<?php if( have_rows('spotlights') ): ?>

    <?php $spotcount = 0;
          $rowcount = 0;
          $floatclass = 'pull-left';
    ?>

    <?php while( have_rows('spotlights') ): the_row(); 

        $image = get_sub_field('image');?>

            <div class="col-md-6 col-sm-12">

                <img class="<?php echo $floatclass; ?>" src="<?php echo $image; ?>" />

            </div>

            <?php
                if($spotcount == 2) {
                    echo '<div class="clearfix"></div>';
                    $spotcount = 0;
                    ++$rowcount;

                } else {
                    ++$spotcount;
                }

                if ($rowcount % 2 == 0) {
                    $floatclass = 'pull-left';
                } else {
                    $floatclass = 'pull-right';
                }
            ?>

    <?php endwhile; ?>
<?php endif; ?>

虽然这根本不起作用......我无法在5之前出现4/5。5始终覆盖所有内容并向左拉。

我尝试过砌砖，但这不是我想要的。这些div将保持在这个固定的高度，这有助于解决方案。

Answer 1

这是我使用计数器的解决方案......

<?php if( have_rows('spotlights') ): ?>

<?php $spotcount = 0;
      $rowcount = 0;
      $oddImage = 0;
?>

<?php while( have_rows('spotlights') ): the_row(); 

    $image = get_sub_field('image');

            if ($rowcount % 2 == 0) {

                echo '<div class="col-md-6 col-sm-12"><img class="spotlight" src="' $image '" /></div>';

            } else {

                if ($oddImage <= 1) {

                    if($oddImage == 0) {

                        echo '<div class="col-md-6 col-sm-12">';
                        echo '<img class="spotlight" src="';
                        echo $image;
                        echo '" />';
                        ++$oddImage;

                    } else {

                        echo '<img class="spotlight" src="';
                        echo $image;
                        echo '" /></div>';
                        ++$oddImage;
                    }

                } else {

                    echo '<div class="col-md-6 col-sm-12 text"><img class="spotlight" src="';
                    echo $image;
                    echo '" /></div>';
                    $oddImage = 0;
                }
            }

            if($spotcount == 2) {

                echo '<div class="clearfix"></div>';
                $spotcount = 0;
                ++$rowcount;

            } else {
                ++$spotcount;   
            }

            ?>

<?php endwhile; ?>

使用自举和ACF中继器安排替代高度div

1 个答案: