調整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。