親divの幅を最小の子供の幅に制限するにはどうすればいいですか？

Question

Javascriptなしでこれを行うことはできますか？ここで

はモックマークアップ..です

<div id="parent"> 
<div id="child1"> ... </div> 
<div id="child2"> ... </div> 
</div> 

私は、親のdivは、その子のdivの最小の幅を持っていると思います。

私の特定のシナリオdivの1つに可変幅の画像があります divの残りの部分をimg divの幅に制限します。

Answer 1

コメントの議論に基づいています。よく、JSが実行されるまで、メインのdivを表示することはできません。次のように あなたのマークアップが表示されます：

<div id="parent" style="diplay:none"> 
<div class="child" style="width:100px"> ... </div> 
<div class="child" style="width:50px"> ... </div> 
</div>​ 

のJsコード：

var childELements=document.getElementsByClassName("child"); 
var minWidth=999999; 
for(var i=0;i<childELements.length;i++) 
{ 
var width=childELements[i].getWidth(); 
    if(width<minWidth) 
    { 
     minWidth=width;      
    } 
} 

var parent=document.getElementById("parent"); 
parent.style.width=String(minWidth)+"px"; 
parent.style.display="block"; 

Live ​Demo

Answer 2

Math.min(parseInt(document.getElementById("child1")), parseInt(document.getElementById("child2"))); 

これを可能にノーCSSソリューション。