javascript - 根据其他 child 调整div的宽度？

Question

我真的不知道怎么解释这个，但我会尽力的。

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

我该怎么做？

目前，子 div 只占用它们所需的空间，它们不会扩大以填充所有可用宽度的 100%。

Answer 1

你可以这样做:

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 才能实际反射(reflect)宽度的变化)请在此处查看 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"));