如何將父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寬度限制爲最小孩子的寬度？

回答

相關問題