提问者:小点点

在foreach循环中显示每行的不同列数


我从数据库中提取了一些目的地城市的列表,并想在视图中显示它。

这是我通常的做法

<?php
$this->db->select('*');
$citydata = $this->db->get('cities')->result_array();

foreach ($citydata as $citydatas){?>

<div class="col-lg-4">
<img src="<?=$citydatas['banner];?>" />
</div>

<? } ?>

上面的代码将在每一行中显示3列,

但是我想要的是不同的方法,我需要在第一行显示2列,然后在第二行显示3列。

另一种方法是:在第一行中有三列,但第一列将占用半个屏幕,其他两列将占用另一半,在第二行中,前两列将占用一半,然后第三列将占用使用col-6的Rest半个屏幕

这是我正在寻找的第一个网格样式

这是第二个网格样式

我的方法为第一种风格,下面的方法好用吗?

<?php
$this->db->select('*');
$citydata = $this->db->get('cities')->result_array();

$i = 1;

foreach ($citydata as $citydatas){?>

<div class="<?php if($i++ == 1 || $i++ == 2){ echo "col-lg-6";}else{echo"col-lg-4";}?>">
<img src="<?=$citydatas['banner];?>" />
</div>

<? } ?>

共1个答案

匿名用户

您可以使用nth-child选择器和CSS网格来获得所需的结果。

第一网格样式

null

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
}

img:nth-child(6n + 1),
img:nth-child(6n + 2){
  grid-column: span 2;
}

img {
  width: 100%;
  height: 100%;
}
<div class="grid-container">
  <img src="https://picsum.photos/id/10/400" />
  <img src="https://picsum.photos/id/20/400" />
  <img src="https://picsum.photos/id/30/400" />
  <img src="https://picsum.photos/id/40/400" />
  <img src="https://picsum.photos/id/50/400" />
  <img src="https://picsum.photos/id/60/400" />
</div>