如何将动态文本插入具有绝对位置的div？

Question

请参阅 http://www.barelyfitz.com/ screencast / html-training / css / positioning / item 6.它说：

  

对于大多数设计而言，它不是一个可行的解决方案，因为我们通常不知道元素中的文本数量，或者将使用的确切字体大小。

为了将动态文本插入具有绝对位置的div，我需要使用哪种解决方法？

欢迎任何方法

的问候，

Answer 1

如果您的主要目标是将div保留在其位置，而不根据文本数量更改其高度或宽度，我会选择：

div {
    overflow: scroll;
}

另一种选择是让文本大小缩小以适应div，但这涉及一定数量的模糊数学，并且你冒着文本太小的风险，这是没有意义的。

如果你想让div根据文本改变它的高度，这也涉及一些模糊的数学，但基本上，你会得到文本的长度：

var sometext = "Hey, I'm some text!";
var textlength = sometext.length();

并根据该长度进行高度变化。你想玩数字，但它看起来像：

var div_height = 10 * textlength;
$("div").css("height,"+ div_height +"em");

Answer 2

请参阅W3C网站的视觉效果部分此处

Answer 3

也许使用 <！> quot; overflow：auto <！> quot; 对于动态文本容器div。所以高度不是问题。

Answer 4

问题不在于将动态文本放在绝对定位的div中 - div将扩展为适合那里的任何文本。在您的示例中，红色和绿色div上没有定义高度。

绝对定位的div从文档流中取出，因此在html中出现的任何内容都会像它们甚至不存在一样。

使用绝对定位div的设计需要在包含div上定义高度，以便绝对定位的div不与其他内容重叠。在您的示例中，<div id="div-1">定义了250px的高度。将其更改为100px，您将看到<div id="div-after">在红色和绿色div下移动。

因此，如果您在侧边栏中有一个绝对定位的div而后面没有任何内容，则可以添加所需的所有动态文本。如果标题中有一个，则会使您的设计实现起来非常复杂。