面臨一些CSS問題

-1

任何人都可以告訴我下面的代碼出了什麼問題？面臨一些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 -->

請告訴我出了什麼問題？

來源

2012-10-31 John

我認爲他們是在CSS中沒有故障的任何其他問題，在你的代碼 –

@SahilPopli這是肯定的CSS。至少他沒有使用表格:) –

起初，HTML的標記是有點臃腫，難以維護。其次，你不應該使用內聯的CSS。

你的問題是浮動和你的產品沒有相同的高度。當你給以下選擇器#view .col3一個像370px的高度，你可以看到產品漂浮很好。所以，你必須選擇你如何設置你的身高。

靜態高度有足夠的空間
剝離產品稱號
通過JavaScript
設置.col3的高度...

來源

2012-10-31 10:35:30 rxtxr

右鍵。第三行中的1款產品非常清楚地表明瞭這一點。需要每個產品的設置高度，或每行之後/之間的* clear *元素。 –

@Spontifixus哇！非常感謝兄弟！我可以知道U怎麼確定我應該設置高度，然後我得到我想要的輸出，順便說一句，你在哪裏找到#view .col3在我的源代碼..？只是爲了學習... – John

@John：只是爲了澄清：我沒有寫出答案，我只是改進了格式。所以功勞歸於@ rxtxr！ – Spontifixus

...

HI現在添加您的#wrapper ID

的overflow:hidden像這樣

#wrapper{ 
overflow:hidden; 
}

來源

2012-10-31 10:33:32

據我所知我沒有使用任何地方的包裝身份證..你可能會有點breif，你指的是..？ – John

現在在您的樣式表中的任何位置添加此css –

貴麗高度是不同的或自動和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*/ 
}

推薦方案：

Masonry Plugin

來源

2012-10-31 10:40:35 wandarkaf

面臨一些CSS問題

回答

相關問題