0

我有一个围绕三个浮动容器包装的容器，包装容器的宽度可变，left most inner container宽度为 100 像素，宽度为 500 像素right most inner container。没有设定宽度，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' });
    }
}
4

2 回答 2

0

目前，这是未经测试的，但我认为以下应该可行。有效地找到父级的宽度，兄弟级的宽度，然后从另一个中减去：

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 开始的，而不是像编程语言那样从 0 开始的。所以#outerContainer div:nth-child(0)没有匹配或样式化任何元素。

于 2012-04-23T21:19:33.060 回答
0

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

于 2012-04-23T21:28:42.933 回答