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内mainContent做一些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/

的问候，
SAURABH

Answer 2

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

这是答案的链接......等了很长时间后我才达成这个目标。

通过了解内部div的大小来确定html页面的最大宽度

2 个答案: