css - 将 div 高度强制设置为其内部的大字体大小

Question

我有以下代码:

<div id="container">
   <div id="top">TOP TEXT
   </div>
   <div id="middle">MIDDLE TEXT
   </div>
   <div id="bottom">BOTTOM TEXT
   </div>
</div>

使用以下 CSS:

#top { font-size: 13px;}
#middle { font-size: 40px;}
#bottom { font-size: 10px;}

正如您所看到的，字体大小有很大不同。问题是 div 无法正确显示，因为字体太大，导致文本显示在其他文本之上。 div 不调整高度....我尝试使用 height: auto，我尝试更改 span 的 div，溢出:visible...但我找不到解决方案。 如何强制div将其高度调整为大字体大小？

解决方案: 谢谢大家的想法。事实上，Shredder，他给了我 jsfiddle 的链接......告诉我问题不存在。我在 BODY 标签上发现了一些导致问题的 css:

body {font: 75%/125% arial,sans-serif;}

正如你所看到的，这个“75%/125%”改变了字体高度......所以出现了问题...... 非常感谢!

Answer 1

文本不应重叠如果您只显示 css 和 html，则 div 会扩展以适合其内容。根据提供的信息有限，它可能是以下之一(除其他外): - div 的高度或最大高度正在 css 中的某个位置设置， - div 使用position:absolute 放置在CSS 中的某处