Question

有人可以告诉我下面代码出了什么问题吗？

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

请告诉我出了什么问题？

Answer 1

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

您的问题与浮动有关，而且您的产品没有相同的高度。当您为以下选择器#view .col3提供370px的高度时，您可以看到产品漂浮得很好。所以，你必须选择如何设置你的身高。

有足够空间的静态高度
剥离产品标题
通过javaScript
...

Answer 2

...

HI现在添加overflow:hidden ID

的#wrapper

就像这样

#wrapper{
overflow:hidden;
}

Answer 3

您的身高不同或自动和浮动：左

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

#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*/
}

推荐的解决方案：

Masonry Plugin

面对一些CSS问题

3 个答案: