圖片庫在特定元素後顯示奇怪

Question

我有一個簡單的image gallery從有序列表中產生。圖像的問題在於它們的大小不相同，第四個分別是第七個和第七個打破了流程，並且它們顯示得很奇怪。

我可以用

#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行或更多的圖像行，那麼第n孩子將需要調整d。 （See here）