Html 为什么内联块div彼此对齐不均匀？

如何将两个具有高度属性的内联块div放置在同一行上

预期：

图例和容器应位于同一行

实际：

图例位于容器的后面

div{ 显示：内联块； } 传奇{ 高度：500px； 边框：纯红； } 容器{ 高度：500px； 宽度：500px； 边框：纯绿色； } 洛勒姆

---

内联级别元素的初始设置为“垂直对齐：基线”。这意味着span、textarea和img等元素（其默认显示值为inline）将与容器的基线对齐

大多数字母所在的线，其下延伸的线

资料来源：

在您的问题中，您已将div设置为display:inline block。这将激活基线对齐，框与其他框的基线垂直对齐。这就是你看到的

可以通过覆盖垂直对齐上的默认值来解决此问题。试试这个：

div{ 显示：内联块； 垂直对齐：底部；/*新*/ } 传奇{ 高度：500px； 边框：纯红； } 容器{ 高度：500px； 宽度：500px； 边框：纯绿色； } 洛勒姆

---

内联级别元素的初始设置为“垂直对齐：基线”。这意味着span、textarea和img等元素（其默认显示值为inline）将与容器的基线对齐

大多数字母所在的线，其下延伸的线

资料来源：

在您的问题中，您已将div设置为display:inline block。这将激活基线对齐，框与其他框的基线垂直对齐。这就是你看到的

可以通过覆盖垂直对齐上的默认值来解决此问题。试试这个：

div{ 显示：内联块； 垂直对齐：底部；/*新*/ } 传奇{ 高度：500px； 边框：纯红； } 容器{ 高度：500px； 宽度：500px； 边框：纯绿色； } 洛勒姆

---

对主体使用display:inline flex并查看它是否工作在这种情况下，您应该指定一个垂直对齐，如div{display:inline block；vertical align:top；}@Kangouroops但是当缺少垂直对齐时，奇怪行为的原因是什么？@Utku-Well，默认的垂直对齐；值是基线，但您的一个div中只有文本，您可以在第二个div中测试但写入一些内容，然后就可以工作了。在主体中使用display:inline flex并查看它是否可以工作。在这种情况下，您应该指定垂直对齐，如div{display:inline block；vertical align:top；}@Kangouroops但是当垂直对齐丢失时，这种奇怪行为的原因是什么呢？@Utku-Well，默认的垂直对齐；值是基线，但您的一个div中只有文本，您可以在第二个div中测试但写入一些内容，然后就可以了。顺便问一下，为什么垂直对齐：顶部、垂直对齐：中部和垂直对齐：底部的效果相同？因为两个div的高度相同。如果它们有不同的高度，你会看到不同。顺便问一句，为什么垂直对齐：顶部、垂直对齐：中间和垂直对齐：底部的效果相同？因为两个div的高度相同。如果他们有不同的高度，你会看到不同。