量表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; 

这样的话，你可以有一个最小宽度，但它会根据内容的宽度扩大。