如何按比例调整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的大小以适应文本内部？

回答

相关问题