0

これは私の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か何か。

4

2 に答える 2

0

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-04T08:51:53.550 に答える
0

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

ここに答えへのリンクがあります...長い間待った後、私はこれに出くわします。

于 2012-04-05T11:58:39.093 に答える