Question

我正在尝试将最后一张图像（第二只鸭子）显示在第一张图像（猫）下面。这可能是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>

Answer 1

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

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

Answer 2

默认情况下，列表项目会相互显示我相信你使用Bootstrap，li上的类使它们彼此相邻显示。

无论如何，要在第一个Duck下显示它，请在列表项上使用style="clear:both"：

<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" style="clear: both;"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Mandarin.duck.arp.jpg/220px-Mandarin.duck.arp.jpg"></li>
        </ul>

</div>

updated Fiddle

Answer 3

问题是：狗的图片高度高于其他图片，因此在视觉上误差是可以理解的。所以你的代码工作正常，鸭子分别是猫和狗的照片。

如果你想要＆＃34;最后＆＃34;鸭子要在猫的下面，你只需要用最后一只鸭子切换最后一只鸭子。

我真的建议您查看Boostrap 3 documentation以了解所有网格概念。

使用<li>将最后一张图像显示在第一张图像下方

3 个答案: