-1

誰かが以下のコードで何がうまくいかなかったのか教えてもらえますか？

各行に3つずつ、合計18の製品を表示しようとしています。私はこの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 インラインを使用しないでください。

あなたの問題は、製品が浮いていて、同じ高さがないことです。次のセレクター#view .col3に 370px のような高さを与えると、製品がうまく浮いていることがわかります。したがって、身長の設定方法を選択する必要があります。

  • 十分なスペースのある静的な高さ
  • 商品タイトルの削除
  • javaScript を介して .col3 の高さを設定する
  • ...
于 2012-10-31T10:35:30.653 に答える
0

あなたの身長は異なっているか、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 に答える
0

...

こんにちはoverflow:hidden、あなたの#wrapperIDを追加してください

このように

#wrapper{
overflow:hidden;
}
于 2012-10-31T10:33:32.460 に答える