html 頁面最大寬度通過了解內部 div 的大小

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/

問候，
索拉布

Answer 2

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

這是答案的鏈接......等了很久之后我想到了這個。