分区宽度问题

Question

这是我的JSFIDDLE。

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

我想找到这4个块的总宽度。我想把这个宽度分配给上面的Gray块。

所以每当添加新块时，上面的灰色块的宽度应该等于块的总宽度。

<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 
{ 
    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

你需要用准备函数内部代码：

$(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的

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

$('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

使用。集装箱，clearfix和inline-block的

CSS

.container { 
    display: inline-block; 
} 

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

PS基本相同Danield的答案

Answer 7

使用该

display: inline-block;