jquery - 将 div 宽度缩放到内容(在另一个 div 内)

Question

在提供的 fiddle 中，我想让 .content div 宽度自动缩放以适应其中的 .product 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 找出存在的产品数量，然后更改内容的宽度。请注意，这仅在您的所有产品都具有相同宽度(即 100 像素)时才有效。

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