流動的な幅のレイアウトがあります。左右の列の幅は固定されており、中央の列は、ブラウザの幅の変更または画面の解像度の変更に応じて、指定された最大幅と最小幅の間で幅が変更されます。以下の画像のようになります。
ご覧のとおり、中央の列にいくつかの小さなコンテナがあり、いくつかの製品などが保持されています.
私が経験している問題は、幅が変更され、中央の列に 3 つのコンテナーを収容できない場合、1 つが下に落ちて、浮いてから下のように見えることです。
コンテナの右側にあるこのスペースは醜く見えます。私がしたいのは、幅が減少したときに1つが下に落ちた場合、中央の列の中央に2つが表示され、別の1つが下に落ちた場合、左の1つのコンテナーも中央に表示される場合、それらを中央に保つことです。
cssだけでできますか？または、動的に実行するためのスクリプト言語を導入する必要がありますか?
これは私が使用しているコンテナのCSSです
.prod-container{
float: left;
width: 180px;
height: 290px;
margin: 2px 6px;
border: 1px solid black;
}