根據其他孩子調整div的寬度？

我真的不知道如何解釋這一點，但我會盡我所能。根據其他孩子調整div的寬度？

我有一個div（例如固定爲500px），我希望內容能夠平等地「分割寬度」。

我該怎麼做呢？

目前，孩子div只需要他們的要求，他們並沒有放大，以填補全部可用寬度的全部100％。

來源

2012-12-20 Essam Al-Mansouri

如果您不需要支持IE7及以下，這是最好的解決方案 - http://stackoverflow.com/q/6310632/1499781 –

我寫類似的答案，@ZoltanToth東西提及。要麼使用一個真實的'

'，要麼你喜歡語義上的'display：table-cell;'。 –

是否有固定或可變數量的div？ – hagope

回答

你可以做這樣的：

function getIndividualWidth(elementId,childrenCount){ 
var div = document.getElementById(elementId); 
var totalWidth = div.offsetWidth;//500 
//calculating childrenCount would require a function 
//if you were not keeping track of it 
return parseInt(totalWidth/childrenCount); 
}

這裏有一個方法來計算你的div的子元素

這將改變功能成這樣：

function getIndividualWidth(elementId){ 
var element = document.getElementById(elementId); 
var totalWidth = element.offsetWidth;//500 
return parseInt(totalWidth/getChildElementCount(element)); 
}

決定何時使用這將取決於您的元素如何在屏幕上呈現。如果你已經渲染了它們，並且想從某個父母開始，那麼你可以這樣做：

html（跨度是內聯元素，所以它們需要display:inline-block才能真正反映寬度的變化）請參閱這裏的jsfiddle：http://jsfiddle.net/uhejM/

<div id="parent" style="width:500px;"> 
<span>1</span> 
<span>2</span> 
<span>3</span> 
<span>4</span> 
</div>

function getIndividualWidth(element){ 
return parseInt(element.offsetWidth/getChildElementCount(element)); 
} 

function EqualizeChildWidths(element){ 
var width = getIndividualWidth(element); 
var startPoint = element.childNodes; 
for (var child in startPoint) { 
    if (startPoint[child].nodeType != 1) continue; //not an element 
    startPoint[child].style.width = width + "px"; 
} 
}  

EqualizeChildWidths(document.getElementById("parent"));

來源

2012-12-20 02:09:10

使用jQuery計算childrenCount非常簡單，只需執行'$（「＃theParentDiv」）。children（）。length' –

@RodrigoCastro - 這裏沒有jquery標籤。 –

我知道，我只是提供了一個不同的解決方案，如果OP使用jQuery，使用它比使用原始javascript構建相當複雜的函數更簡單（沒有錯誤的函數，它只是另一種方法）。 –

如果我明白你的問題正確使用JQuery：

$('.inner').each(function(){ 

$(this).width(($('#fixed').width()/$('.inner').size())); 

})

將內部對象浮動到左側 - 可以使用絕對多餘的jQuery代碼。

http://jsfiddle.net/Q57xC/3/

來源

2012-12-20 02:32:13 deach

相關問題