Question

我在本地使用Wordpress，因此我没有显示实际工作代码。

我正在使用foreach循环来加载内容块。

我不知道有多少块，但它们需要连续4个。

这个jsfiddle显示硬编码的布局 - https://jsfiddle.net/buen7kps/1/

我的问题是我需要像jsfiddle exmaple中那样对齐最后一行块。

在示例中使用'offset'在最后一行的第一个块上对称。

所以我的问题是如何识别它是否是最后一行，如果它是第3，第2或最后一个块。

这是将4个块连续放置的foreach代码。

        $information_blocks = $block['information_blocks'];

            echo '<div class="row">';

            $block_count = 0;

            foreach( $information_blocks as $information_block){

                if($block_count == 4){
                    $block_count = 0;
        ?>          
                </div><div class="row">


                    <div class="col-sm-3 ">
                        <div class="article-info-block">
                            <h4><?php echo $information_block['information_block_title']; ?></h4>
                            <p><?php echo $information_block['information_block_text']; ?></p>
                        </div>
                    </div>

                <?php

                }else{
                ?>              
                    <div class="col-sm-3">

                        <div class="article-info-block">
                            <h4><?php echo $information_block['information_block_title']; ?></h4>
                            <p><?php echo $information_block['information_block_text']; ?></p>
                        </div>

                    </div>

                <?php
                    $block_count ++;
                    }
                }   

                ?>  


            </div>  

        <?php
        }   
        ?>

Answer 1

嗨@ttmt现在尝试使用CORE PHP，如果WordPress有任何问题我会帮助你。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<style>
    .col-sm-3{border:1px solid red;}
</style>
<div class="container">
  <?php

  $information_blocks = array('Test 1','Test 2','Test 3','Test 4','Test 5','Test 5','Test 5','Test 5','Test 5','Test 5','Test 5','Test 5','Test 5','Test 5','Test 5');


  echo '<div class="row">';

  $block_count = 0;

  $count_block = count($information_blocks);

  $mod_val = $count_block % 4;
  $count_block - $mod_val;
  echo "<div class='row'>";
  $block_count = 0;
  foreach( $information_blocks as $information_block){


      $fooset_calss = "";
    if($block_count == ($count_block - $mod_val)){
        if($mod_val == 1){
            $block_class = 9;
        }
        elseif($mod_val == 2){
            $block_class = 6;
        }
        elseif($mod_val == 3){
            $block_class = 3;
        }

        $fooset_calss = "col-sm-offset-".$block_class;
    }
      ?>
    <div class="col-sm-3 <?php echo $fooset_calss; ?>">
        <div class="article-info-block">
            <h4><?php echo $information_block ?></h4>
        </div>
    </div>
    <?php   
    $block_count ++;
    }   
    ?>
    </div>
</div>
</div>

Answer 2

您的代码有点多余。您可以通过跟踪总块数和增加的块数来合并它并测试最后一行。不确定这是否正是你想要将你的最后一行放在中心的位置（他们不会完全居中于行中奇数个块），但试试这个：

$information_blocks = $block['information_blocks'];
$total = count($information_blocks);
$total_iterated = 0;
$block_count = 0;
$offset_set = FALSE;

foreach($information_blocks as $information_block){
    $offset = '';
    if($block_count == 0){
        echo '<div class="row">';
        $left = $total - $total_iterated;
        if($left < 4 && !$offset_set){
            if($left == 3) $offset = 'col-sm-offset-2';
            elseif($left == 2) $offset = 'col-sm-offset-3';
            elseif ($left == 1) $offset = 'col-sm-offset-5';
            $offset_set = TRUE;
        }
    }
?>

     <div class="col-sm-3 <?php echo $offset ?>">
        <div class="article-info-block">
            <h4><?php echo $information_block['information_block_title']; ?></h4>
            <p><?php echo $information_block['information_block_text']; ?></p>
        </div>
    </div>

<?php
    $block_count++;
    if($block_count == 4 || $total - $total_iterated == 1){
        echo '</div>';
        $block_count = 0;
    }
    $total_iterated++;

}

Wordpress，Bootstrap，在foreach循环中的id元素

2 个答案: