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

ありがとう要素が適切に完全に左に浮いているように次の行要素を防止し、その右側に他よりも背が高いときに問題が起こります。この場合、2番目の項目（説明は2行です）がバグを引き起こしています。

考えられる解決策：2つの行を取ることができますについては、固定サイズを、使用説明

をトリミングする各項目の固定サイズを使用して

• 、（私はこの1つに行くと思います）。
• 浮動小数点に頼らないようにコードを変更する。

ホープこれはあなたが言ったようにそれはそう、