Question

当我显示页面index.php时，只显示THE div id .box的4列而不是5。另一方面，当我最小化和最大化窗口时，会出现THE div id .box的5列。我花了大约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的情况下实现相同的效果，只需使用width: 20% .box上的CSS（参见问题评论）

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

滚动条出现时jQuery窗口调整大小问题

1 个答案: