数组中图像的布局

Question

这是布局。

基本上，我正在获取数组中的图像并尝试使用这种布局创建一个画廊。不知道该怎么做。我尝试了 grid 以及 :nth-child(even) 和 :nth-child(odd) 但它仍然没有成功。

<ul>
    <?php foreach ($images as $image) :?>
      <li><img src="<?php echo $image['url'] ;?>"></li>
    <?php endforeach ;?>
</ul>

链接到 jsfiddle -> https://jsfiddle.net/u5tgLj27/

谢谢。

Answer 1

我们可以这样做

ul {
max-width:90%;
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
}
ul li {
  list-style-type:none;
  width:calc(50% - 10px);
}
ul li:nth-child(3n + 1) {
  width:100%;
}
ul li img {
  width:100%;
}