Question

我有一个容器，它包裹着三个浮动的容器，包装容器的宽度可变，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>

我不确定使用ONLY 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 Fiddle demo

我已将#outerContainer元素设置为1000px宽，只是为了确保所有元素都有足够的空间在演示中并排放置。

我也纠正了你的CSS; CSS是基于一体的，而不是基于零的编程语言。所以#outerContainer div:nth-child(0)没有匹配或设计任何元素。

Answer 2

纯css http://jsfiddle.net/Za8RF/

动态地使子容器在可变宽度父级内获取可用宽度

2 个答案: