So verhindern Sie Produkte für Sprunglinien in List Ansicht (CSS)

Question

Ich habe ein Problem mit meinen Produkten auf Homepage. Ich möchte meine Produkte in 2 Row mit 4 Produkten in einer Reihe zeigen, aber in der zweiten Reihe habe ich 2 Produkte und andere 2 Produkte in der nächsten Reihe.

Dies ist CSS, mit dem ich meine Produkte anpassen kann

.products-grid li.item {
float: left;
width: 170px;
padding: 0px 10px 4px;
} 

Hier ist Screenshot meiner Seite:

Ich habe keine Idee, wie ich das beheben kann:/

Answer 1

Wenn die Spaltenanzahl korrekt ist, was bedeutet, dass Sie 4 Elemente pro Zeile haben, wird sie wahrscheinlich darauf verursacht, dass ein Element höher ist als die anderen. Sie haben wahrscheinlich 2 Lösungen.

1. Geben Sie dem li.item eine feste Höhe
2. Machen clear: both; Um sicherzustellen, dass jede Reihe unter die letzte eingesetzt wird