CSS显示网格图像问题

Question

您好，

我很困惑，为什么有些html页面会将网格显示为屏幕截图。

似乎进入了新的界限。

以下是我使用的CSS。

.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;
}

谢谢

Answer 1

当元素比其他元素高时，问题就发生了，防止下一行元素正确地浮动到完全左边;在这种情况下，第二项（描述为两行）导致错误。

可能的解决方案：

• 为每个项目使用固定大小，修剪说明
• 使用固定大小进行描述，这可能需要两行（我就是这一行）。
• 更改代码，以免您不依赖浮动。

希望这有帮助