動態地使一個子容器在可變寬度父寬度內可用寬度

我有一個包裝三個浮動容器的容器，包裝容器具有可變寬度，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

動態地使一個子容器在可變寬度父寬度內可用寬度

回答

相關問題