CSS div寬度不起作用

我有一個奇怪的問題。我div的一個寬度不起作用。我的CSS像CSS div寬度不起作用

.product_info 
{ 
    margin-top:10px; 
    background:#444; 
    width:850px; 

} 
.product_image 
{ 
    width:350px; 
    text-align:center; 
    float:left; 
    padding:8px; 
    border:1px solid #e9e9e9; 
    background:#fff; 
} 
.product_details 
{ 
    float:left; 
    width:400px; 
    margin-left:25px; 
    font-size:14px; 
    font-family:"Helvetica"; 
    background:#d71414; 
}

和我的HTML文件

<div class="product_info"> 
       <div class="product_image"> 

       </div> 

       <div class="product_details"> 
        <div class="selection"> 
        <form action="{$path_site}{$indeex_file}" method="post"> 
        Size 
        {foreach name = feach item = k from = $product_size} 
         <input type="radio" name="size" value="{$k.product_size}" />{$k.product_size} 
        {/foreach} 


        </div> 

        <div class="selection"> 
        No. of pieces <input type="text" name="quantity"> 

        </div> 
        <div class="prc"> 
         <span class="WebRupee">Rs.</span> {$product_info->product_cost}.00 
          </div> 

        <div class="buy_btn"><input type="submit" value="BUY" /></div> 
        </form> 
       </div> 
      </div>

但你可以附加的圖片中看到我的divproduct_info的寬度不850px，哪些錯誤 enter image description here

來源

2012-11-05 Nitish

放在一個的jsfiddle你的代碼，所以我們都可以測試... 你有沒有在其他瀏覽器檢查的話嗎？ –

嘗試

顯示：區塊

它應該工作

來源

2014-01-30 09:39:15 Vishal

喜現在定義您的類.product_intooverflow:hidden;

Live demo

作爲這樣

.product_info{ 
overflow:hidden; 
}

=======

或選項2

限定一個CSS

的CSS

.clr{ 
clear:both; 
}

把這個div在最後一行關閉的.product_info類

<div class="product_info"> 
       <div class="product_image"> 

       </div> 

       <div class="product_details"> 
        <div class="selection"> 
        <form action="{$path_site}{$indeex_file}" method="post"> 
        Size 
        {foreach name = feach item = k from = $product_size} 
         <input type="radio" name="size" value="{$k.product_size}" />{$k.product_size} 
        {/foreach} 


        </div> 

        <div class="selection"> 
        No. of pieces <input type="text" name="quantity"> 

        </div> 
        <div class="prc"> 
         <span class="WebRupee">Rs.</span> {$product_info->product_cost}.00 
          </div> 

        <div class="buy_btn"><input type="submit" value="BUY" /></div> 
        </form> 
       </div> 
        <div class="clr"></div> 
      </div>

Live demo option two

來源

2012-11-05 08:20:32

現場演示無效！請鏈接一個jsFilddle和沒有支付每點擊網站！ –

我希望你是這樣看： - http://tinkerbin.com/MU2CUpre

其實您已在您的child div's中使用floating，並且沒有clear您的parent div。所以我父DIV和cleared有cleared您parent div通過overflow:hidden;這個孩子的div .product_details也以其優良的工作......

CSS

.product_info 
{ 
    margin-top:10px; 
    background:#444; 
    width:850px; 
    overflow:hidden; 
} 

.product_details 
{ 
    float:left; 
    width:400px; 
    margin-left:25px; 
    font-size:14px; 
    font-family:"Helvetica"; 
    background:#d71414; 
    clear:both; 
}

來源

2012-11-05 08:22:28

我用'overflow：hidden;'但結果相同！ – Nitish

，但是這也清楚了你的這個.product_details –

使用clear: both;屬性。

.product_info {clear: both;}

來源

2016-03-18 14:06:39 Rajeesh

CSS div寬度不起作用

回答

相關問題