CSS 在 jsFiddle 中工作，但仅部分在 jsFiddle 之外工作 + DIV问题
我遇到了一个奇怪的问题 - 完全相同的标记在 jsFiddle 中工作正常，但是当我将其放入文本文件中时，仅显示标题，而不显示实际内容。
我见过其他类似的问题，但它们涉及 jQuery（我还没有使用）。
关联： http://jsfiddle.net/3BpRr/
编辑：
Jsfiddle 由于某种原因有
第二个问题：
<div class="chatLine">
<div class="chatName">John </div>
<div class="chatMsg">I am very hungry.</div>
</div>
<br />
<div class="chatLine">
有没有办法将
先感谢您！
I have encountered a strange problem - the exact same markup works fine in jsFiddle, but when I put it in a text file, only the header displays and the actual content is not shown.
I've seen other similar questions but they involve jQuery (which I don't use yet).
link:
http://jsfiddle.net/3BpRr/
Edit:
Jsfiddle for some reason has <style type="text/css"> twice. I did that and it works.
Second question:
<div class="chatLine">
<div class="chatName">John </div>
<div class="chatMsg">I am very hungry.</div>
</div>
<br />
<div class="chatLine">
Is there a way to place the <br /> in the chatLine div? I'm going to need to use javascript to create/destroy chatLines.
Thank you in advance!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
问题出在
overflow:hidden;属性上。删除它或使其选择器更加精确，因为它当前正在选择所有元素。编辑：为什么在 chatLine
The problem is with
overflow:hidden;property. Remove it or make the selector for it more precise as it is currently selecting all elements.EDIT: The reason why putting a
<br />at the end of the chatLine<div>causes things to blow up is because you're using absolute positioning. Try not to use absolute positioning except for things that actually are absolute.我修改了你的最后一个jsfiddle： http://jsfiddle.net/qktrv/1/
希望是这样您想要实现的目标。
更改：
jsFiddle 不需要 CSS 框中的样式标签，因此我将其删除。另外，我更改了在所有 div 上设置绝对定位的规则，并将其放在每个需要它的 div 上。尽管几乎所有事情都设置为绝对，但这可能会防止将来出现其他问题。如果你想稍后将其改回来以制作更短的CSS文件，我不认为这样做有什么坏处，只要你在没有绝对定位的div上设置正确的定位即可。
概述：
由于该规则，您的 chatLine、chatName 和 chatMsg div 都被绝对定位，这使它们脱离了文档的正常流程。换句话说，他们不会扩展父 div。
I've modified your last jsfiddle: http://jsfiddle.net/qktrv/1/
Hopefully that's what you are looking to accomplish.
Changes:
jsFiddle doesn't require a style tag in the CSS box so I took it out. Also, I changed the rule that set absolute positioning on all divs and just put it on each div that needed it. Even though it's set to absolute for almost everything, this may prevent other problems down the road. If you want to change it back later to make a shorter CSS file, I don't see the harm in doing so, so long as you set the correct positioning on the divs that aren't absolutely positioned.
Overview:
Your chatLine, chatName and chatMsg divs were all positioned absolute because of that rule, which takes them out of the normal flow of the document. In other words, they wouldn't expand the parent div.