ウェブページの画像がまっすぐに留まらない

Question

私は問題に直面していますが、これに固執しています。私は5枚の画像があるページを作成しています。ページには2つのstylesheetsnormalize,mainがあります。 mainは私のカスタムスタイルシートです。そしてここにページのサンプルがあります。

私は、このページが応答したいが、私は小さな幅でブラウザのサイズを変更する際に、ナビゲーションバーとイメージがまっすぐ、それはこのようにプレビューが表示されます滞在していません。これらのすべての画像は、私はあなたのCSSを見ていたし、問題の原因を見つけSample

Answer 1

順不同リストのダウンロードページを通じて位置しています。あなたの使用するfloat:leftプロパティと関係があります。ブラウザを使用すると、画面の左側にすべてがスタックされます。あなたのケースでは、リスト項目の1つが通常のものより長い（高さが賢明）ので、それを置くスペースを見つけることができませんでした。そのような場合は、フレックスボックスを使う方がはるかに優れています。ここで対照的にどの

#gallary{ 
    display: inline-flex; 
    flex-wrap: wrap; 
    margin:0; 
    padding:0; 
    list-style-type: none; 
    } 
    #gallary li{ 
    width:45%; 
    margin:2.5%; 
    background-color: #f5f5f5; 
    color:#bdc3c7; 
    } 

あり、このコードは、行及び利用可能なスペースがない、それが周りに反るとその下にそれを置く場合にアイテムを配置しようとします。 display: inline-flex;はフレックスボックスを作成し、flex-wrap: wrap;はワープするように指示します。私が削除したことに注意してください。float:left