image de grille d'affichage CSS problème

Question

Salut,

Je suis tellement confus que la raison pour laquelle une partie de la page html affiche une grille comme une capture d'écran.

Il semble que l'on entrait dans une nouvelle ligne.

Ci-dessous est un css que j'ai utilisé.

.woocommerce ul.products li.product,.woocommerce-page ul.products li.product{ 
    float:left; 
    padding:0; 
    position:relative; 
} 
.woocommerce ul.products li.product.product-category:hover .container-inner h3,.woocommerce-page ul.products li.product.product-category:hover .container-inner h3{ 
    color:#000; 
} 
.woocommerce ul.products li.product.product-category,.woocommerce-page ul.products li.product.product-category{ 
    width:33.33%; 
} 
.woocommerce ul.products li.product.product-category a img,.woocommerce-page ul.products li.product.product-category a img{ 
    height:100%; 
} 
.product-category.product:nth-child(3n+1){ 
    clear:both !important; 
} 
.woocommerce ul.products li.product.product-category.first,.woocommerce-page ul.products li.product.product-category.first{ 
    clear:none; 
} 
.woocommerce ul.products.list li.product.product-category a img,.woocommerce-page ul.products.list li.product.product-category a img{ 
    width:32%! important; 
    height:auto; 
} 
.woocommerce ul.products.owl-carousel li.product,.woocommerce-page ul.products.owl-carousel li.product{ 
    width:100% !important; 
    margin:0; 
} 

Merci

Answer 1

Le problème se produit lorsqu'un élément est plus grand que d'autres à sa droite, ce qui empêche les éléments suivants de ligne flotter au fond à gauche correctement; dans ce cas, le deuxième élément (dont la description est deux lignes) provoque le bogue.

solutions possibles:

• En utilisant une taille fixe pour chaque élément, coupe la description
• En utilisant une taille fixe pour la description, qui peut prendre deux lignes (je vais sur celui-ci).
• Modification du code pour ne pas dépendre des flottants.

Hope this helps