php - 在foreach循环中的每个包含6个内容的div之后添加一个包含5个内容的div

标签 php html css twitter-bootstrap foreach

所以基本上我需要输出的是这个..

enter image description here enter image description here

我目前有这段代码。我对如何进行这件事感到很困惑。

  <?php
    $terms = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,
    15, 16, 17, 18, 19, 20, 21, 22];
  ?>

  <div class="container text-center">
    <?php $count = 0; ?>
    <div class="row">
      <?php
        foreach($terms as $term) : ?>
        <?php if ($count == 6) :  ?>
     </div> 
      <div class="row">
      <?php $count = 1; endif; ?>

      <div class="col-sm-2">
      <?php echo $term; ?>
      </div>
      <?php $count++; endforeach; ?>
    </div>  
  </div>

最佳答案

您可以使用 CSS 来选择子元素的模式。在此示例中,每第 7 个和第 11 个元素都被赋予与其他子元素交互的唯一边距属性。不需要 PHP 循环。

.wrapper {
  max-width: 320px;
  text-align: center;
}
.item {
  display: inline-block;
  width: 48px;
  height: 46px;
  background-color: #000;
}
.item:nth-of-type(11n+0){
  margin-right: 24px;
}
.item:nth-of-type(11n-4){
  margin-left: 24px;
}
<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

关于php - 在foreach循环中的每个包含6个内容的div之后添加一个包含5个内容的div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48446193/

相关文章:

php - 从 MySql 查询中排序数组

php - nodejs和php生成的不同HMAC

javascript - ChartJS 动态折线图在悬停时会重影回旧数据

javascript - 仅在点击后出现的占位符 HTML JS

html - 如何在文本周围制作一个圆圈,圆圈面积尽可能小?

c# - 我如何加载我的 ASHX CSS 处理程序?

php - 使用 MySQL 查询返回多个数据

javascript - 如何使用 JQuery/Javascript 编辑嵌套列表?

css - CSS 元素边缘为 "outside"滚动框边缘意味着什么?

javascript - d3.json 发出什么样的请求?