Chiều rộng CSS div không hoạt động

Question

Tôi có vấn đề lạ.Một chiều rộng của div của tôi không hoạt động. CSS của tôi là như

.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; 
} 

Và tập tin HTML của tôi là

<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> 

Nhưng như bạn có thể nhìn thấy trong hình kèm theo divproduct_info 's chiều rộng của tôi không phải là 850px, Whats sai

Answer 1

Hãy thử

hiển thị : block

Nó sẽ hoạt động

Answer 2

Hi bây giờ xác định lớp học của bạn .product_intooverflow:hidden;

Live demo

như như thế này

.product_info{ 
overflow:hidden; 
} 

=======

hay tùy chọn 2

xác định một css

Css

.clr{ 
clear:both; 
} 

Đặt div này ở dòng cuối cùng đóng các .product_infolớp

<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

Answer 3

tôi hy vọng bạn đang tìm kiếm như thế này: - http://tinkerbin.com/MU2CUpre

Thực ra bạn đã sử dụng floating trong số child div's và không clearparent div của mình. Vì vậy, tôi có clearedparent div của bạn thông qua overflow:hidden; trong mẹ div và cleared đứa trẻ này div .product_details cũng nó làm việc tốt ......

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; 
} 

Answer 4

Sử dụng thuộc tính clear: both;.

.product_info {clear: both;}