1

我真的不知道如何解释，但我会尽力而为。

我有一个 div（例如固定为 500px），我希望内容在它们之间“分割宽度”。

我该怎么做呢？

目前，子 div 只占用它们所需的量，并且它们不会放大以填充所有可用宽度的全部 100%。

4

2 回答 2

2

你可以这样做：

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 getChildElementCount(element){
 var childCounter = 0;
 var startPoint = element.childNodes;
 for (var child in startPoint) {
  if (startPoint[child].nodeType != 1) continue; //not an element
  childCounter++;
 }
 return childCounter;
}

这会将功能更改为：

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>

js

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-20T02:09:10.600 回答
0

如果我正确理解您的问题，请使用 JQuery：

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

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

})​

将内部对象浮动到左侧 - 可以使用绝对左侧和更多 jquery 代码。

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

于 2012-12-20T02:32:13.850 回答