特定の要素の後に変わった画像ギャラリー

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

大雑把に言えば、これは1行につき2つの画像で動作します.3つ以上の画像の行がある場合、n番目の子供は調整する必要がありますd。 （See here）