高さが異なるため、複数のdivの間にいくつかのランダムな空白があります。強制的な高さを使わずにどうやって取り除くことができますか？

Question

私の問題に関連するsimilar threadがあり、それに対する解決策は、強制的な高さを持つことです。しかし、これはテーマの応答性に問題を引き起こしています。私に説明させてください。

私はPrestashopをthis themeで使用しています。ご覧のとおり、デモで使用されている画像はかなり大きく（395 x px）です。私の製品イメージはこれほど高さがありません（約355 x pxです）、これはそれらの間にランダムな空白がある問題です。私は元にいくつかの変更を加えました。現在、それは一種の次のようになります。今

、私は<div class="product-container"><li class="ajax_block_product>内側に400ピクセルの高さを強制的に一時的な修正を達成することができました：

ただし、テーマの応答性に問題が発生したため、これはあまり効果的ではありません。タブレット/モバイル/その他の画面表示では、400pxの高さが十分でないか、または大きすぎます。高さが足りないときは、コンテナ内の要素があふれていて、あまりにも大きければ、div間には大きな隙間があります（高さは賢明です）。

product-containerに@mediaのルールを追加し、300px、380px、420pxなどの異なる高さを追加して、別の問題を修正しました。私はこれがあまり実用的ではないように感じ、私が見ていないより良い解決策があります。どんな提案も感謝しています！

Answer 1

迅速かつ簡単な解決策は、（コンテナ上）ラッピングとフレキシボックスを使用することであろう、

ul.product_list.grid { 
    display: flex; 
    flex-wrap: wrap; 
} 

Answer 2

強制的な高さがproduct-containerであることに加えて、これに関する唯一の解決策は、すべての画像を正確に同じ高さにすることです。

私は、製品の容器に強制高さを有するの修正を元に戻したし、各コンテナに自然な高さを確認するために要素を検査 をした：@JiFusに私の応答では、私はこれが言及しました。 コンテナの中には、残りの部分より1pxの高さの差があります。

Prestashopには指定されたサイズの画像を再生するオプションがありますので、正しく動作させるために設定を混乱させるだけです。