javascript - 通过了解内部 div 的大小来设置 html 页面最大宽度

Question

这是我的 HTML 代码

<div class="container">
    <div class="menu-vertical">menu-vertical</div>
    <div class="mainContent">mainContent</div>
</div>​

这是我的CSS

.container {
    border: 3px solid #666;
    overflow: hidden
}
.menu-vertical {
    width: 230px;
    float: left;
    padding: 10px;
    border: 2px solid #f0f
}
.mainContent {
    overflow: hidden;
    padding: 30px;
    border: 2px solid #00f
}​

现在我想在 mainContent 中制作一些固定大小的 div 让我们说 150px 但是如果 mainContent宽度变成了，比方说 650px 然后我将连续有 4 个 div 然后再连续 4 个。所以 4 div 意味着它将是 600px，因此我将有一个额外的 50px 空间。

现在最后我真正想做的是检测这个空白区域并将 mainContent max-width 设置为 600px`。任何可以做到这一点的技巧。 Javascript 或其他东西。

Answer 1

这里是使用 jquery 的解决方案:

$(function(){
   var outerdiv = $('.mainContent');
   var innerdivs = $('.mainContent > div'); 
   var sum =0;

    innerdivs.each(function(index){
        sum += $(this).width();    //calculate and add the widths of every div
    });   

    //outerdiv.width(sum);        //set new width for .maincontent

    outerdiv.css("max-width", sum);   //you can also set max-width like this.
});

你可以在这里查看 jsfiddle:http://jsfiddle.net/jqYK6/

问候，
紫罗兰