滾動條出現時出現jQuery窗口大小調整問題

Question

當我顯示頁面index.php時，只出現了div div .box的4列而不是5。另一方面，當我最小化和最大化窗口時，出現5個div div id .box列。我花了大約4個小時，並且我注意到，當我不使用溢出時，一切都很好：auto;到#panel我把溢出：滾動;。然後一切都很好。在頁面加載時，我得到所有5列，並在最小化和最大化窗口我也有5列。但我不想讓這個欄溢出：滾動#kontener的底部。還有另一種方法可以做到嗎？我投了票。謝謝！ /編輯 我忘了說，如果頁面上只有一些框，但直到滾動條出現爲止的數量不是很多，那麼我們忘記了這一點。

不工作例如：http://jsfiddle.net/MtUWn/509/

我有以下代碼： 的style.css

#panel{position:absolute;top:72px;left:0px;right:0px;bottom:50px;overflow:auto;}/*overflow:scroll;*/ 
    #kontener{overflow:hidden;} 
    .box {display:block;float:left;} 
    .box_in {margin:5px;padding:5px;height:260px;border:1px solid grey;} 

的index.php

<script type="text/javascript"> 

    function onResize() { 
     var cw = $('#kontener').width(); 
     $(".box").width(cw/5); 
    } 

    $(window).load('resize', onResize); 
    $(window).bind('resize', onResize); 

</script> 

<div id="panel">  
    <div id="kontener"> 
     <div class="box"><div class="box_in">Box</div></div> 
     <div class="box"><div class="box_in">Box</div></div> 
     <div class="box"><div class="box_in">Box</div></div> 
     <div class="box"><div class="box_in">Box</div></div> 
     <div class="box"><div class="box_in">Box</div></div> 
     <div class="box"><div class="box_in">Box</div></div> 
     <div class="box"><div class="box_in">Box</div></div> 
     <div class="box"><div class="box_in">Box</div></div> 
     <div class="box"><div class="box_in">Box</div></div> 
     <div class="box"><div class="box_in">Box</div></div> 
     <div class="box"><div class="box_in">Box</div></div> 
     <div class="box"><div class="box_in">Box</div></div> 
     <div class="box"><div class="box_in">Box</div></div> 
     <div class="box"><div class="box_in">Box</div></div> 
     <div class="box"><div class="box_in">Box</div></div> 
    </div> 
</div> 

Answer 1

您可以無需同樣的效果jQuery，只需使用CSS width: 20%就可以了.box（查看問題評論）

http://jsfiddle.net/MtUWn/516/