动态地使一个子容器在可变宽度父宽度内可用宽度

我有一个包装三个浮动容器的容器，包装容器具有可变宽度，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' }); 
    } 
}

来源

2012-04-23 Patrick Robert Shea O' Connor

你们是不是要找到一个更好的* * JavaScript解决方案，或只CSS的解决方案？你可以做一个http://jsfiddle.net/演示显示你到目前为止？ – thirtydot 2012-04-23 21:25:41

这里提到的很多代码是来自一个更大的项目的片段，我会看看我能做些什么来为它做一个jsfiddle。另外，CSS只是我的首选解决方法。 – 2012-04-23 23:11:24

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

来源

2012-04-23 21:28:42

有没有一种方法可以让你考虑如何让中心div一旦达到某个特定的宽度，比如说40px？ – 2012-04-23 23:12:42

你是什么意思下降？因为它的最大宽度应该是40px？如果是这样，它应该正确还是左对齐？ – 2012-04-24 06:37:22

下降，我的意思是下降或隐藏或类似的东西。基本上我希望它截断到某个点 - 比如说40px的宽度 - 然后就好像它是一个块元素并在下面打破。 – 2012-04-24 19:35:31

这是，目前，未经测试，但我认为下面应该工作。有效地找到父的宽度，兄弟姐妹的宽度，然后减去从另一个：

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)与任何元素都不匹配或造型。

来源

2012-04-23 21:19:33

谢谢，这是一个更好的JS实现;不过，我更喜欢只有一个CSS。此外，感谢您指出基于1的数组，我实际上并没有使用CSS3作为我的项目，这只是为了解决这个问题。 – 2012-04-23 23:09:38

动态地使一个子容器在可变宽度父宽度内可用宽度

回答

相关问题