我遇到了一个奇怪的问题 - 完全相同的标记在 jsFiddle 中工作正常，但是当我将它放入文本文件时，只显示标题并且不显示实际内容。
我见过其他类似的问题，但它们涉及 jQuery（我还没有使用）。
链接：http: //jsfiddle.net/3BpRr/
编辑：
Jsfiddle 出于某种原因有<style type="text/css">两次。我这样做了，它有效。
第二个问题：
<div class="chatLine">
<div class="chatName">John </div>
<div class="chatMsg">I am very hungry.</div>
</div>
<br />
<div class="chatLine">
有没有办法将它<br />放在 chatLine div 中？我将需要使用 javascript 来创建/销毁 chatLines。
先感谢您！
问题出在overflow:hidden;财产上。删除它或使其选择器更精确，因为它当前正在选择所有元素。
编辑：将 a<br />放在 chatLine 末尾<div>会导致事情爆炸的原因是因为您使用的是绝对定位。尽量不要使用绝对定位，除非是绝对的。
我已经修改了你的最后一个 jsfiddle：http: //jsfiddle.net/qktrv/1/
希望这就是你想要完成的。
变化：
jsFiddle 不需要 CSS 框中的样式标签，所以我把它拿出来了。另外，我更改了在所有 div 上设置绝对定位的规则，并将其放在需要它的每个 div 上。即使几乎所有内容都设置为绝对值，但这可能会防止出现其他问题。如果您想稍后将其改回以制作更短的 CSS 文件，我认为这样做没有什么害处，只要您在未绝对定位的 div 上设置正确的定位即可。
概述：
由于该规则，您的 chatLine、chatName 和 chatMsg div 都是绝对定位的，这使它们脱离了文档的正常流程。换句话说，他们不会扩展父 div。