图像库在特定元素后显示奇怪

Question

我有一个简单的image gallery来自有序列表。图像的问题在于它们不是相同的大小，第4个，第7个分别打破了流程并且它们显示得很奇怪。

我可以使用

解决这个问题

    #wrapper li:nth-child(5n)
     {

        clear: left;
        }

   #wrapper li:nth-child(7n)
     {

      clear: left;
        }

但如果我要向画廊添加更多照片，则很难维护。如果没有元素超出正常流量，显示图像会有什么更好的解决方案？谢谢！

Answer 1

为li标记设置位置样式，而不是其中的图像......

#wrapper ol li {
    float: left;
    display: inline-block;
      width: 50%;
}

然后你可以定位奇数li项并清除左浮动....

#wrapper ol li:nth-child(odd) {
    clear: left;
}

Updated Fiddle

粗略地说，这适用于每行两个图像...如果你有3行或更多图像的行，那么需要调整nth-child。 （See here）