如何同時並動態地限制Child DIV和Parent DIV的寬度

我正在使用下面的HTML代碼。以下是我想要實現的：我希望父DIV採用其子DIV的「最長」寬度的寬度。如果您看下面的HTML代碼段＃1，它可以正常工作，但如果您查看HTML代碼段＃2，您將看到「測試標題」邊框沒有根據其DIV寬度更改其DIV寬度最長的孩子DIV。請提供任何指針。謝謝。如何同時並動態地限制Child DIV和Parent DIV的寬度

<!-- HTML code segment#1 --> 
<html> 
<body> 

<div style="font-family:Arial; fontsize:11px;border-style:solid;border-width:1px;padding:1px;position:absolute;width:auto;" > 

<span tyle="padding:1px,7px,1px,7px; background- color:Blue;color:White;position:fixed;height:25px;" > 
<span style="padding:1px,7px,1px,7px;height:25px; middle; text-align: center; padding-top: 2px; font-weight: bold; vertical-align: middle;"> 

Test Title 

</span> 

</span> 

<div style="margin-top:3px;" > 

<p style="padding:2px,1px,2px,1px; margin:0px;">Testing Text1</p> 

<p style="padding:2px,1px,2px,1px; margin:0px;">Testing Text2 which is Long</p>   </div> 
</div> 
</body> 
</html> 


<!-- HTML code segment#2 --> 
<html> 
<body> 

<div style="font-family:Arial; fontsize:11px;border-style:solid;border-width:1px;padding:1px;position:absolute;width:auto;" > 

<span tyle="padding:1px,7px,1px,7px; background- color:Blue;color:White;position:fixed;height:25px;" > 
<span style="padding:1px,7px,1px,7px;height:25px; middle; text-align: center; padding-top: 2px; font-weight: bold; vertical-align: middle;"> 

Test Title 

</span> 

</span> 

<div style="margin-top:3px;" > 

<p style="padding:2px,1px,2px,1px; margin:0px;">Testing Text1</p> 

<p style="padding:2px,1px,2px,1px; margin:0px;">Testing Text2 which is Longggggggggggggggggggggggggggggggggggggggggggggggggggggg</p>   </div> 
</div> 
</body> 
</html>

來源

2010-03-04 anshu

你在哪個瀏覽器中看到這個問題？我已經在Firefox 3.5.8中測試了你的HTML「segements」，它工作正常。 – ssergei 2010-03-05 01:03:46

我想你將不得不使用類似javascript的東西來計算孩子的寬度，然後讓瀏覽器改變父母的寬度。除非你的孩子有一個固定寬度的東西（比如圖片），否則沒有辦法做到你想要的服務器端。我知道這不會給你一個答案（我不擅長JS，但它有助於改進你的問題。） – Marty 2010-03-05 02:09:56

設置父div的最大寬度爲最長子div的最小寬度。

來源

2015-06-14 06:58:58

如何同時並動態地限制Child DIV和Parent DIV的寬度

回答

相關問題