如何根据里面的文本比例调整div的大小？
假设我们有一个 div 元素，其内边距为零、绝对定位、预定义宽度（以像素为单位）和一些纯文本。
现在，我们将文本的 CSS font-size 属性增加 1 个像素。 我应该通过什么措施增加 div 的宽度，以使其布局保持不变（即，不会因宽度不成比例地增加而导致单词从一行跳到另一行）？
如果 CSS 字体大小无法以像素为单位设置，那么应该以 pt 或 em 为单位设置，为什么？
Suppose that we have a div element with zero padding, absolute positioning, predefined width (in pixels) and some plain text inside.
Now, we increase the CSS font-size property of the text by one pixel. By what measure should I increase the width of the div so that its layout remains the same (i.e. no words jump from one line to another due to disproportionally increased width)?
In case it is not possible with CSS font-size set in pixels, should it be set in pt or em, and why?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
您想要指定 div 的宽度和以 em 为单位的字体大小。 下面是一个示例，更改字体大小（以像素为单位）会导致 div 和文本按比例调整大小，而不会更改布局：
在此示例中，如果更改 body 元素的字体大小，则所有内容都将按比例调整大小。 这是因为我们用来指定 div 中大小的 em 是相对于 body 元素中的字体大小来测量的。 增加 body 元素的字体大小会使 div 中的 em 的宽度和字体大小都变大。
You want to specify both the width of your div and the font size in ems. Here is an example where changing the font size in pixels causes the div and text to resize proportionally without the layout changing:
In this example, if you change the font size of the body element, everything will resize proportionally. This is because the ems we used to specify sizes in the div are measured relative to the font size in the body element. Increasing the font size of the body element makes the ems larger in the div for both width and font size.
我从未见过在 CSS 中甚至在基于 Web 的应用程序中完成这样的事情。 也就是说，第二个问题的答案（em 或 pt 哪个更好）是 em。 为什么？ 因为 em 用于测量字体大小，并且在设计上是成比例的：1em 是正文字体大小的 100%。 1.1em 为 110%，0.8em 为 80%，依此类推。
I've never seen something like this done in CSS or even as a web-based app. That said, the answer to your second question, which is better for fonts, em or pt, is em. Why? because em is used to measure font sizes and is proportionate by design: 1em is 100% of the size of your body text font size. 1.1em is 110%, 0.8em is 80%, and so on.
Scriptaculous 将此作为内置效果。 试一试。
Scriptaculous has this as a built-in effect. Give it a try.
正如 CLaRGe 所说，em 是基于父元素字体大小的度量，因此当您希望元素的大小与字体大小成比例时，它是自然的选择。 如果您以像素为单位测量字体大小，则 em 就是以像素为单位的字体大小，例如，当您的字体大小为 10px 时，200px 表示 20em。
As CLaRGe said, em is a measurement based on the font size of the parent element, so it is the natural choice to use when you want the size of an element proportional to font size. If you're measuring your font size in pixels, then an em is your font size in pixels, e.g. 200px when your font size is 10px means 20em.
CSS 本身是一个静态的东西，div 也是如此。
您不能使一个元素的属性依赖于其他元素的属性。 即使对于单个元素，您也无法将其某些属性与其他元素同步。
显示自动调整某些特征的唯一内置解决方案是 HTML 表格，但您可能不希望使用它。
添加这种动态的唯一方法是使用脚本语言，例如 JavaScript。
CSS on its own is quite a static thing, as well as divs.
You cannot make properties of one element depend on the properties of some other one. Even for a single element, you cannot synchronize some of its properties with the others.
The only built-in solution that shows some characteristics of auto-adjustment is an HTML table, but you probably don't wish to use that.
The only way to add this dynamics is to use script languages, like JavaScript.