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顯示網格圖像問題

回答

相關問題