html頁面最大寬度通過了解裏面的div

的大小這是我的HTML代碼html頁面最大寬度通過了解裏面的div

<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內固定大小的mainContent可以說150px然而，如果mainContent寬度變成了，比如說650px那麼我將連續有4個div，然後再連續4個。所以4 div意味着它將是600px，因此我將有一個額外的空間50px。

現在終於到底什麼我想要做的是檢測這個空的空間，並使mainContentmax-width 600px``。任何可以做到這一點的技巧。 Javascript什麼的。

來源

2012-04-04 Django Anonymous

所以你想要主div縮小到600.然後接下來會發生什麼？容器是否縮小？菜單寬度增加了嗎？ – Joseph 2012-04-04 08:18:37

是的，我想div縮小。 – 2012-04-04 08:27:23

嘗試使用'min-width：600'而不是'width：650' – Joseph 2012-04-04 08:30:45

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

這裏是鏈接的答案...等待了很長時間後，我來了這個。

來源

2012-04-05 11:58:39

這裏是解決方案使用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/

問候，
SAURABH

來源

2012-04-04 08:51:53 Saurabh

檢查了這一點：我修改了一下...如果你可以修復一個問題 http://jsfiddle.net/jqYK6/2/ – 2012-04-04 09:00:55

我會盡力做到這一點，這將需要設置一個最大允許'maincontent'的寬度。 – Saurabh 2012-04-04 09:09:29

html頁面最大寬度通過了解裏面的div

回答

相關問題