css - 奇妙なレスポンシブレイアウト

Question

携帯電話でポートレートモードで表示すると、画像は1行に2列表示され、各画像コンテナの幅は50％になります。

ただし、1行に1つの画像しか表示されない場合もあります。完全にランダムに見えます！電話機を横向きモードに切り替えると、画像は1行あたり3列で表示され、すべてが正常に機能します。

これが私が何を意味するかを見ることができるように画像です：

ご覧のとおり、コブラグローブはすべてそれ自体です！ウィンドウのサイズを変更して1行に2つの画像しか表示されない場合、Firefoxで問題を再現できます。

http://www.snowrepublic.co.uk/にアクセスし、ページの下部にある[携帯電話に切り替える]ボタン（黒い携帯電話のようなアイコン）を押してから、自分で表示できる[手袋]カテゴリを選択します。 。奇妙なことに、「ボディアーマー」カテゴリにヒットした場合、まったく同じレイアウトが完全に機能します。

Answer 1

この問題は、.centeredContent要素に高さがなく、ボックスの1つにコンテンツが少ない場合、その下のボックスが少しジャンプするという事実が原因で発生します（これはフロート要素の通常の動作です）。

それを修正するには.centeredContent、可能な限り多くのコンテンツに対応できる高さを指定します。あなたの場合 260pxは十分なようです：

.centeredContent {
    ...
    height: 260px;
}