调整DIV宽度与JS

内容

设置display: inline-block应使周围的div比其含量不大于：How to make div not larger than its contents?调整DIV宽度与JS

然而，当行时间包括它不工作（jFiddle））：

<style> 
.container{ 
    border: solid; 
    display: inline-block 
} 

.box{ 
    background-color: #08c; 
    width: 50px; 
    height: 50px; 
    margin: 20px; 
    display: inline-block; 
} 
</style> 

<div class='container'> 
<div class='box'></div> 
<div class='box'></div> 
<div class='box'></div> 
<div class='box'></div> 
<div class='box'></div> 
<div class='box'></div> 
</div>

在CSS when inline-block elements line-break, parent wrapper does not fit new width中声明可以用jQuery修正DIV的宽度。你如何做这个例子？

回答的问题被标记为重复，所以我不能给出答案，但是这个工作对我来说（jFiddle）：

<style> 
.container{ 
    border: solid; 
    display: inline-block; 
} 

.box{ 
    background-color: #08c; 
    width: 50px; 
    height: 50px; 
    margin: 20px; 
    display: inline-block; 
} 
</style> 

<script> 
function adjust(){ 
// reset container width 
$('.container').width(''); 
var x = $('.container').width(); 

    // size of box is 90px (50+20+20), so set width to the minimal width which // is dividible by 90px 
    x= x - (x % 90); 
    $('.container').width(x); 
} 

$(document).ready(function(){ 

adjust(); 

$(window).resize(adjust); 
}); 
</script> 


<div class='container'> 
<div class='box'></div><!-- 
--><div class='box'></div><!-- 
--><div class='box'></div><!-- 
--><div class='box'></div><!-- 
--><div class='box'></div><!-- 
--><div class='box'></div> 
</div>

此外，由于箱子是内联元素，我需要删除空格，否则他们不适合div。