Question

在提供的小提琴中，我希望自动将.content div宽度缩放到适合其中的.product div。

这是至关重要的，因为会有不同数量的产品，因此固定宽度不合适

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

不要为它设置宽度，它会根据产品的宽度改变尺寸吗？

Answer 2

如果需要设置内容的宽度，为什么不尝试

min-width: whatever;

这样，您可以拥有最小宽度，但它会根据内容的宽度进行扩展。

Answer 3

您可以使用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

将div宽度缩放到内容（在另一个div中）

3 个答案: