Html 当一个有文本而另一个没有'；T

这里有两个相同的div：

HTML

这些渲染效果很好，两个相同的框并排（fiddle:）

但是由于一个div中有文本，而另一个div中没有文本，因此它们没有对齐！（小提琴：）

这个

<div id="left"></div>
<div id="right">Right</div>

赖特

…结果是：

使用

也可以重现此行为

---

这是什么原因，为什么？有什么好的解决方案？

您需要垂直对齐元素：

#左#右{
...
垂直对齐：顶部；
}

---

.

简短答案：将

垂直对齐

属性设置为

顶部

较长的答案：内联元素的。当你的DIV没有内容时，他们会排好队。但是，添加文本时，浏览器将向下移动div，使文本位于基线上：

通过将对齐方式更改为“顶部”，可以按需要对齐div

---

非常有用。非常感谢。我喜欢你的简短回答

#left, #right
{
    width: 100px;
    height: 40px;
    border: 1px solid gray;
    display: inline-block;
}

<div id="left"></div>
<div id="right">Right</div>