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

我可以在没有Javascript的情况下做到这一点吗？如何将父div宽度限制为最小孩子的宽度？

这里是模拟标记..

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

我希望父div来具有的至少其子格的宽度。

我的特殊场景我有一个可变宽度的图像里面的一个div 我希望其余的div限制自己的img div的宽度。

来源

2012-03-30 srinathhs

我不确定这可能没有JavaScript。有没有你不想使用它的原因？ – Luke 2012-03-30 18:18:52

如果你知道图像的大小不能设置为最小的？如果你想它是动态的，那么你有一个Javascript的问题没有去态度.. – Baz1nga 2012-03-30 18:20:27

我想要设计它是流体和图像有一个固定的百分比高度将根据浏览器的宽度而改变，我认为它如果我使用JavaScript，将不会是一个平稳过渡。 – srinathhs 2012-03-30 18:25:00

根据评论中的讨论：嗯，你可以一直显示你的主div，直到JS完成执行。您的标记将如下所示：

<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

来源

2012-03-30 18:31:32 Baz1nga

注意，我不确定是否所有的浏览器都支持上述所有功能.. dnt诅咒我..我没有给你一个jQuery的soln（你应该对此感谢）：D – Baz1nga 2012-03-30 18:52:31

Thankyou，看起来不可能没有JavaScript，我会按照你的建议实施。 – srinathhs 2012-03-31 12:06:12

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

无CSS的解决了这个可能。

来源

2012-03-30 18:37:36 mystrdat

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

回答

相关问题