動的に子コンテナを可変幅の内側で使用可能な幅にする

Question

私は3つの浮動コンテナを包むコンテナを持ち、コンテナの幅は可変でleft most inner containerの幅は100px、right most inner containerの幅は500pxです。 center containerには幅が設定されていませんが、できるだけ多くのスペースが必要です。

<style type="text/css"> 
    #outerContainer div:nth-child(1) {float: left; width: 100px} 
    #outerContainer div:nth-child(2) {float: left} 
    #outerContainer div:nth-child(3) {float: right; width: 500px} 
</style> 

<div id="outerContainer"> 
    <div>left most inner container</div> 
    <div>center container</div> 
    <div>right most inner container</div> 
</div> 

ダイナミック中央コンテナは、プレゼンテーションの目的のためにコンテンツoverflow: hiddenと省略記号です作り、それに適用されるいくつかのスタイルを持っています。

<style type="text/css"> 
#outerContainer div:nth-child(1) { 
    overflow:hidden; 
    text-overflow:ellipsis; 
    white-space:nowrap; 
} 
</style> 

解決策は、内側の要素の幅を動的に拡大/縮小する方法がわかりません。ここに私のJavaScriptのソリューションは動作しますが、私はそれが過剰に見えるようにカットしたいと思います。

NS.textWidth = function(sourceSel){ 
    var sourceSel = sourceSel, 
     html_org = $(sourceSel).html(), 
     html_calc = '<span>' + html_org + '</span>'; 

    //Wrap contents with a span. 
    $(sourceSel).html(html_calc).css({width:'100%'}); 
    //Find width of contents within span. 
    var width = $(sourceSel).find('span:first').width(); 

    //Replace with original contents. 
    $(sourceSel).html(html_org); 

    return width; 
}; 

adjustContainerWidth(); 

$(window).bind('resize', function(e){ 
    clearTimeout(c.resize_timeout); 

    c.resize_timeout = setTimeout(function() { 
     adjustContainerWidth(); 
    }, 200); 
}); 

function adjustContainerWidth() { 
    var winW = parseInt($(window).width()); 
    var firstContainer = parseInt($('#outerContainer div:nth-child(1)').width()); 
    var lastContainer = parseInt($('#outerContainer div:nth-child(3)').width()); 
    var availW = winW - firstContainer - lastContainer; 
    var textW = NS.textWidth('#outerContainer div:nth-child(2)'); 

    if (availW > 40 && availW < textW) { 
     $('#outerContainer div:nth-child(1)').css({ width : availW + 'px' }); 
    } else { 
     $('#outerContainer div:nth-child(1)').css({ width : textW + 'px' }); 
    } 
} 

Answer 1

純粋なCSS

Answer 2

これは現在テストされていませんが、次のように動作するはずです。効果的に親の幅、兄弟の幅を検索し、一方から他方を減算：

var that = $(this), 
    parentWidth = that.parent().width(), 
    siblingsWidth = 0; 

that.siblings().each(
    function(){ 
     siblingsWidth += $(this).outerWidth(); 
    }); 

that.width(parentWidth - siblingsWidth); 

JS Fiddle demoを。

#outerContainer要素を1000px幅にしました。すべての要素にデモに並んで配置するスペースがあるようにしました。

私はCSSを少し修正しました。 CSSは、プログラミング言語のように、ゼロベースではなく、1つに基づいています。だから#outerContainer div:nth-child(0)は、どの要素にも一致しない、またはスタイリングしていた。