如何使我的图像显示3x3，为什么最后2个显示到下一行？

Question

为什么我的3x3图像网格中的最后2张图像没有进入下面的下一行而我的图像没有显示，我该如何解决？

http://dev.picstrap.com/

我对这种事情还很陌生，对不起，如果这是一个初学者问题，谢谢！

Answer 1

您有一个已定义的

#gallery li:nth-child(4n) {
    clear: left;
}

response.css中的

（可能是您正在使用的外部库）。

这就是你的第8个li（4 * 2）获得该行为的原因。您可以使用以下内容覆盖它：

#gallery li:nth-child(4n) {
    clear: none;
}

只需确保您的选择器重量超过默认值。

Answer 2

你可以使用array_chunk（$ array，3）;

拆分数组

<?php @foreach (array_chunk($array,3) as $rows){ ?>
     <div class="row">
          <?php @foreach ($rows as $row){ ?>
              <div class='col-lg-4'> <!--split 12 column into 4x3-->
                 images+ description
              </div>
          <?php } ?>
      </div>
<?php } ?>