我从数据库中提取了一些目的地城市的列表,并想在视图中显示它。
这是我通常的做法
<?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>
<? } ?>
您可以使用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>