-1

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

我正在尝试展示 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 -->

请告诉我出了什么问题？

4

3 回答 3

3

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

您的问题是关于浮动并且您的产品高度不相等。当您为以下选择器#view .col3提供 370px 的高度时，您可以看到产品很好地浮动。所以，你必须选择如何设置你的高度。

  • 有足够空间的静态高度
  • 剥离产品标题
  • 通过 javaScript 设置 .col3 的高度
  • ...
于 2012-10-31T10:35:30.653 回答
0

...

嗨，现在添加overflow:hidden您的#wrapperid

像这样

#wrapper{
overflow:hidden;
}
于 2012-10-31T10:33:32.460 回答
0

您的 li 高度不同或 auto 和 float:left

强制解决方案（不推荐）：

#content ul.thumb_view li {
  border-bottom: none;
  display: inline-block;
  min-height: 300px;/*you might try to force the height if you want to also*/
}

推荐解决方案：

砌体插件

于 2012-10-31T10:40:35.177 回答