量表DIV寬度到內容（另一DIV內）

Question

在所提供的小提琴，我想自動具有。內容的div寬度尺度到配合其內的。產品的div。

這是關鍵，因爲會有不同的產物的量，從而一個固定的寬度是不恰當的

http://jsfiddle.net/9GcM3/2/

HTML

<div class="container"> 
<div class="content"> 
    <div class="product"> 
     <p>string</p> 
    </div> 
    <div class="product"> 
     <p>string</p> 
    </div> 
    <div class="product"> 
     <p>string</p> 
    </div> 
    <div class="product"> 
     <p>string</p> 
    </div> 
    <div class="product"> 
     <p>string</p> 
    </div> 
    <div class="product"> 
     <p>string</p> 
    </div> 
    <div class="product"> 
     <p>string</p> 
    </div> 
    <div class="product"> 
     <p>string</p> 
    </div> 
    <div class="product"> 

    </div> 
</div> 

CSS

.container { 
height:100px; 
width:400px; 
background:red; 
padding:0 10px; 
overflow-x: hidden; 



} 
    .content { 
background:#eee; 
height:70px; 


    width: 2000px; 

} 
.product { 
height:80px; 
width:100px; 
display: inline-block; 
float: left; 
}  

Answer 1

你可以使用jQuery來找出有多少產品存在，那麼改變你的內容的寬度。請注意，只有當您的所有產品具有相同的寬度（100px）時，此功能纔有效。

var products = $('.product').length; 
var width = products * 100; 
$('.content').css('width', width + 'px');  

Here is an example

你甚至可以改變你的container的寬度，使其適合很好。但您需要刪除寬度content。

var products = $('.product').length; 
var width = products * 100; 
$('.container').css('width', width + 'px'); 

Example

Answer 2

不要爲它設置一個寬度，它會根據產品的寬度改變大小？

Answer 3

如果有必要設置內容的寬度，爲什麼不嘗試

min-width: whatever; 

這樣的話，你可以有一個最小寬度，但它會根據內容的寬度擴大。