Html 当字体大小改变时，Div的大小也随之改变

嗯。这是代码

div {
    display: inline-block;
    float: left;
    text-align: center;
    height: 4em;
    overflow: hidden;
    word-break: break-all;
}

.descriptio {
    width: 60%;
    background-color: lightcoral;
    font-size:0.8em;
}


<div clasa="list">
      <div class="ev-container">
          <div class="tempus"><p>T-ALFA</p></div>  
          <div class="locus"><p>TYPE</p></div>
          <div class="descriptio"><p>DESCRIPTION IS WHERE YOU FIND OUT</p>
      </div>
</div>

div{
显示：内联块；
浮动：左；
文本对齐：居中；
高度：4em；
溢出：隐藏；
单词break：打破一切；
}
.描述{
宽度：60%；
背景颜色：浅珊瑚；
字号：0.8em；
}
T-ALFA

类型

描述就是你发现的地方

.tempus

和

.locus

div的宽度为

的20%

。它们都没有从包围它们的div继承的边距和填充

为了对真理的热爱。。。为什么。。。为什么。。。当

.descriptio

中的字体大小为

0.8em

时，它会将div大小和浮点值弄乱吗

请告诉我。我就要把我的旧的、生锈的、值得信赖的笔记本电脑扔出窗外

我来了，得到了答复 感谢史蒂夫·芬顿的回答。在过去的两天里，我第一次摆弄css。我不知道标准化CSS/HTML等的人在吸烟，但我肯定不想尝试

---

我一直在读关于calc（）函数以及标准化委员会是如何讨厌它的。“高”在他们身上是高的

高度的变化是因为您使用的是

em

height，并且通过更改字体大小有效地改变了高度

一种修复方法是将字体大小更改移动到段落：

.descriptio p {
    font-size: 0.8em; 
}

---

现在，所有三个

div

元素都具有相同的字体大小，因此

4em

将等于相同的高度。

这是因为您的div的高度与字体大小相比较（您在em中给出了div高度）。使用高度：50px；例如，它正在工作。

em

是基于当前字体大小的度量单位

在您的示例中，如果div的字体大小是16px，那么高度将是64px（16x4）

如果需要静态高度，请改用像素

就您的

而言，

60%

宽度是通过容器的大小来测量的。它不受字体大小的影响

---

参考：

你是说搞砸了？你想要的输出是什么？3个整齐的左浮动div，都一样高。描述的高度会发生变化。非常感谢。请创建一个–jsfiddle、codepen或其他东西。您希望您的输出是什么？如果字体大小改变，为什么高度不会改变？先生，您解决了我的问题。我真的不明白为什么它真的有效。我将所有div的大小设置为4em。那么，如果div是4em，为什么本地设置字体大小会改变div的大小呢？它是

4em

，其中

1em

是字母

m

的大小。。。在一个div中，它小了20%，因为您将字母

m

（以及所有其他字母）的大小设置为

0.8m

。因此，如果div上的字体是

16px

，那么

4em

将是

4x16

。css的工作原理有点复杂……这就是它的有趣之处：）如果这解决了你的问题，请随意接受答案——如果你认为它写得好，甚至可以投票。欢迎使用堆栈溢出。我如何接受答案？这附近有点不对劲。。。不能投票我需要名誉