CSS显示网格图像问题

嗨，

我很困惑的是，为什么一些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; 
}

谢谢

来源

2017-02-25 user2971638

当一个元素就是比别人在它的右边高的问题发生，防止下一行的元素浮到完全离开正确;在这种情况下，第二个项目（该描述是两行）正在导致该错误。

可能的解决方案：

使用每个项目一个固定的大小，修剪描述
使用用于描述一个固定的大小，这可能需要两行（我走在这条之一）。
更改代码，以便您不依赖浮动。

希望这有助于

来源

2017-02-25 04:32:23

感谢，好像你说当我使用SUBSTR（），以固定大小的描述。它显示在相同的行中。 – user2971638

CSS显示网格图像问题

回答

相关问题