Jquery 分区宽度问题

这是我的名片

场景-在这里，一、二、三个部门是动态的。单个块的数量可能会增加。

我想找出这4个街区的总宽度。我想把这个宽度分配给上面的灰色块

因此，每当添加新块时，上述灰色块的宽度应等于块的总宽度

<div class="head">
<div class="top"></div>

<div class="body">
    <div class="body-inner">
        <div class="w one"></div>
        <div class="w two"></div>
        <div class="w three"></div>
        <div class="w four"></div>
    </div>
</div> 

---

您可以计算每个块的宽度，并将该宽度指定给

.top

我在这里创建了函数

refreshWidthCalculation（）

，如果要添加新的

这里有更新

---

您需要将代码包装在ready函数中：

$(document).ready(function(){
var x = 0;
$('.w').each(function () {
    x += $(this).width();
});
alert(x);

var y = $('.body').width();
alert(y);
});

---

为什么不将顶部div移动到车身内部div，然后设置：

.body-inner
{
    display: inline-block;
}

（无需JS）

您可以使用jquery的

-返回元素的宽度，以及左右填充、边框和可选边距（以像素为单位）

$('document').ready(function () {
    var x = 0;

    $('.w').each(function () {
        x += $(this).outerWidth() + 10;
    });


    //10 because first-child does not have margin left and last-child does not have margin right
    x -= 10;

    $(".top").css("width", x + "px");

});

使用.container、clearfix和内联块

CSS

.container {
  display: inline-block;
}

JSfiddle：

PS基本上与Danield的答案相同

display: inline-block;

---

我只是得到整个区块的宽度以及单个区块的宽度。但是我如何得到4个区块的宽度呢？它是动态的。谢谢你的代码。但是灰色框的宽度并不完全等于下面的总宽度。因为在css中，您没有提到

的
宽度
。五个

.container {
  display: inline-block;
}

display: inline-block;