如何按比例調整div的大小以適應文本內部？

假設我們有一個div元素具有零填充，絕對定位，預定義寬度（以像素爲單位）和一些純文本。如何按比例調整div的大小以適應文本內部？

現在，我們將文本的CSS font-size屬性增加一個像素。我應該通過什麼措施增加div的寬度，使其佈局保持不變（即由於寬度不成比例地增加，沒有詞從一行跳到另一行）？

如果它是不可能的CSS字體大小以像素爲單位設置，應該它PT或EM，爲什麼設置？

2009-04-21 dpq

你想指定div的寬度和ems中的字體大小。這裏是在像素更改字體大小會導致div和文本按比例調整而不佈局變更的例子：

<html> 
    <head> 
    <title>Proportional Resize Example</title> 
    <style> 
     body {font-size:10px} 
     div { 
     position:absolute; 
     top:100px; 
     left:100px; 
     width:20em; 
     font-size:2em; 
     padding:0; 
     background:green} 
    </style> 
    <head> 
<body> 
    <div> 
    This text will resize proportionally. 
    This text will resize proportionally. 
    This text will resize proportionally. 
    </div> 
</body> 
</html>

在這個例子中，如果你改變了body元素的字體大小，一切都會按比例調整。這是因爲我們用來在div中指定大小的ems是相對於body元素中的字體大小來衡量的。增加body元素的字體大小使ems在寬度和字體大小上都更大。

來源

2009-04-21 19:44:40 vamin

對於可擴展性，在這種情況下最好使用id而不是覆蓋div覆蓋。雖然這應該做到這一點。 – 2009-04-21 19:58:04

Scriptaculous將此作爲內置效果。試一試。

new Effect.Scale('id_of_element', percent, [options]);

來源

2009-04-21 17:45:32

我從來沒有在CSS或甚至是基於web的應用程序中看到過這樣的事情。也就是說，第二個問題的答案是em，這對字體，em或pt更好。爲什麼？因爲em用於測量字體大小，並按設計進行比例：1em是正文文本字體大小的100％。 1.1em是110％，0.8em是80％，依此類推。

來源

2009-04-21 17:54:01 CLaRGe

正如CLaRGe所說，em是基於父元素的字體大小的度量，因此當您希望元素的大小與字體大小成比例時，它是自然選擇。如果您使用像素來衡量字體大小，那麼em就是以像素爲單位的字體大小，例如200px當你的字體大小是10px意味着20em。

來源

2009-04-21 17:56:56 Skilldrick

CSS本身是一個相當靜態的東西，以及divs。

您不能使一個元素的屬性取決於另一個元素的屬性。即使對於單個元素，也不能將其某些屬性與其他屬性同步。

顯示自動調整特性的唯一內置解決方案是HTML表格，但您可能不希望使用該表格。

添加此動態的唯一方法是使用腳本語言，如JavaScript。

來源

2009-04-21 18:15:18 User

如何按比例調整div的大小以適應文本內部？

回答

相關問題