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

감사; 이 경우 두 번째 항목 (설명이 두 줄임)이 버그의 원인입니다.

가능한 해결책 : 두 줄을 취할 수 설명 고정 된 크기를 사용하여 설명

트리밍 각 항목에 대한 고정 된 크기를 사용

• , (나는이 일에 갈 것).
• 부동 소수점에 의존하지 않도록 코드를 변경하십시오.

희망이 당신이 말한 것처럼 보인다