php - 面临一些CSS问题

<分区>

谁能告诉我下面的代码出了什么问题？

我试图显示 18 种产品，每行 3 种。我是这个 CSS 的新手，不确定哪里出了问题，你能从下面的代码中检查一下吗:

这是输出:

http://your-guru.com/store/c/clothes/

这是显示产品的代码:

<!-- Product List -->
<div class="pl">
  [product.each]
  <div class="t1 col3">
   <ul style="display: block;" class="display thumb_view category_list">
    <li>
     <div class="content_block">
      <a href="[product.url]" title="[product.name]"  class="product_thumb" style="width:190px; height:180px">
       <img src="http://templatic.com/demos/ecommerce/wp-content/themes/eCommerce_child/images/sale.png" alt="" class="sale_img">[product.image direct='1' tag='1' width='190' height='180']
      </a>
      <div class="content">
       <h3>
        <a href="[product.url]" title="View details of [product.name]">[product.name]</a>
       </h3>
       <p class="sale_price">
       <?php if ($product->saleprice > 0 &&  $product->saleprice < $product->price) { ?>
       <div class="prc">
        <small>
         <span style="text-decoration: line-through; color:blue;">[product.currency mode='sign'][product.price]</span>
         &nbsp&nbsp
         <span style="font-weight: bold; color:red;">[product.currency mode='sign'][product.saleprice]</span>
        </small>
       </div>
       <?php } else { ?>
       <div class="prc">
        <small>
         <span style="font-weight: bold; color:blue;">[product.currency mode='sign'][product.price]</span>
        </small>
       </div>    
       <?php } ?>
       </p>
      </div>
     </div>  <!-- content block #end --> 
    </li>
   </ul>
  </div>  <!-- t1 col3 #end --> 
  [/product.each]
  <div class="clearingdiv"></div>
 </div> <!-- /Product List -->

请告诉我哪里出了问题？

最佳答案

起初，HTML-MarkUp 有点臃肿，难以维护。其次，你不应该使用内联 css。

您的问题是产品的 float 和高度不相等。当您为以下选择器 #view .col3 设置 370px 的高度时，您可以看到产品很好地 float 。因此，您必须选择如何设置高度。