html - 用<li>将要显示的最后一张图像放在第一张图像的下方

我正在尝试将最后一张图像（第二只鸭子）显示在第一张图像（猫）下方。 li标签可以吗？

这是我的Fiddle

.container {
  width: 100%;
  padding: 0;
  margin: 0;
}

ul {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

img {
  padding 5px;
  max-width: 100%;
}

<div class="container">
  <ul>
    <li class="col-xs-4 col-sm-6 col-xs-12"><img src="https://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg"></li>
    <li class="col-xs-4 col-sm-6 col-xs-12"><img src="https://i.pinimg.com/736x/21/b1/59/21b159ed8487d01f4ea52913804b870d--chocolate-labs-chocolate-peanut-butter.jpg"></li>
    <li class="col-xs-4 col-sm-6 col-xs-12"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Mandarin.duck.arp.jpg/220px-Mandarin.duck.arp.jpg"></li>
    <li class="col-xs-4 col-sm-6 col-xs-12"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Mandarin.duck.arp.jpg/220px-Mandarin.duck.arp.jpg" style="float: left;"></li>
  </ul>

</div>

最佳答案

将清除这两个属性添加到列表的每三个元素。fiddle

ul li:nth-child(3n + 1){
  clear:both;
}

关于html - 用<li>将要显示的最后一张图像放在第一张图像的下方，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46239932/