阵列中图像的布局

Question

这是布局。

基本上，我要获取数组中的图像，并尝试使用这种布局创建图库。不知道如何去做。我尝试了网格，也尝试了：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%;
}