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の子要素を数えるための1つのアプローチです

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 に答える