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
}​

现在我想在固定大小的范围div内制作一些内容，但是如果宽度变成了，可以说我将连续 4 个，然后再连续 4 个。所以 4意味着它将是，因此我将拥有额外的空间。mainContent150pxmainContent650pxdivdiv600px50px

现在最后我想要做的是检测这个空白空间并将其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/

问候，
索拉布

Answer 2

https://stackoverflow.com/a/10011466/1182021

这是答案的链接......等待很长时间后，我想到了这个。