分宽问题

Question

这是我的JSFIDDLE。

场景 - 此处各个分区一，二，三是动态的。单个块的数量可能会增加。

我想找到这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> 

Answer 1

为什么不将你的顶部div移动到body-inner div中，然后设置：

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

FIDDLE （无需JS）

Answer 2

您可以计算每个块的宽度，并将该宽度指定为.top。

我在这里创建了refreshWidthCalculation()函数，如果要添加新的<div class="w"></div>，则需要每次调用

此处已更新jsFiddle

var w=0;
$('document').ready(function() {
    refreshWidthCalculation();
});
function refreshWidthCalculation(){
  w=0; 
  $(".w").each(function(){
      w+=$(this).width();
  });
  $(".top").width(w);  
}

Answer 3

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

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

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

fiddle

Answer 4

Demo

    var onew=$('.one').width();
    var twow=$('.two').width();
    var threew=$('.three').width();
    var fourw =$('.four').width();
    $('.body-inner').width(  onew + twow + threew + fourw );

Answer 5

你可以使用jquery＆＃39;

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

$('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");

});

Fiddle

Answer 6

使用 .container ， clearfix 和 inline-block

<强> CSS

.container {
  display: inline-block;
}

JSfiddle：http://jsfiddle.net/ew4Y3/10/

PS 与Danield的回答基本相同

Answer 7

使用

display: inline-block;