如何将父div宽度限制为最小子宽度？

Question

我可以在没有Javascript的情况下执行此操作吗？

这是模拟标记..

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

我希望父div的宽度为其子div的最小值。

我的特殊情况我在其中一个div中有一个可变宽度的图像 我希望其余的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解决方案。