你好，
我很困惑为什么一些 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;
}
谢谢
最佳答案
当一个元素比它右边的其他元素高时，问题就会发生，从而阻止下一行元素正确地 float 到最左边；在这种情况下，第二项(描述为两行)导致了错误。
可能的解决方案:
- 为每个元素使用固定尺寸，修剪描述
- 使用固定大小的描述，可以占用两行(我会继续这一行)。
- 更改代码，使您不依赖 float 。
希望对你有帮助
关于html - CSS显示网格图像问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42451828/