javascript - 子コンテナーが可変幅の親内で使用可能な幅を動的に取得するようにします

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>

CSSのみを使用して、この内部要素の幅を動的にスケーリングする解決策が何であるかわかりません。これが機能する私の 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

これは現在テストされていませんが、次のように機能すると思います。親の幅、兄弟の幅を効果的に見つけて、一方を他方から減算します。

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

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

that.width(parentWidth - siblingsWidth);

JSフィドルデモ。

#outerContainerデモですべての要素を並べて配置できるスペースを確保するために、要素の幅を1000ピクセルにしました。

CSSも少し修正しました。CSSは、プログラミング言語のようにゼロベースではなく、1ベースです。その#outerContainer div:nth-child(0)ため、どの要素とも一致またはスタイリングされていませんでした。

Answer 2

純粋なCSS http://jsfiddle.net/Za8RF/