Html 是什么导致该部门的位置发生变化？

---

我试图让这4个div坐在同一条垂直线上。为什么按钮的存在会改变第一个div的位置

HTML

结果

---

将

垂直对齐：底部
添加到
div的样式中

问题的原因是存在任何内容，因为它定义了
div

只要更改div的display属性，它们就会垂直对齐：

显示：块

编辑：@ben说他想让div垂直对齐。如果你一定要投我反对票，但如果他不知道水平和垂直的区别，那不是我的错。
像这样调整css是有效的

.box {
    width:200px;
    height:200px;
    padding:10px;
    border:1px solid black;
    text-align:center;
}
div.box{display:inline;float:left;}

这就是为什么我讨厌内联块。“哦，我在内联。”“哦，我在内联。”“不，内联！”“不！内联！”是的，是的，
inline block
的意思是“从外部内联，从内部内联”。来自CSS 2.1规范：“该值导致元素生成一个内联级块容器。内联块的内部被格式化为块框，元素本身被格式化为原子内联级框。”它仍然让我恼火。
display:block
是默认值，显然不是OP想要的。没错，但他说，“我正试图让这4个div位于同一条垂直线上。”他的CSS是
display:inline block
。将其更改为
block
会产生所需的垂直对齐。除了解决方案中的div不再位于同一条线上之外。从屏幕截图中获取一些上下文信息。”我试图让这4个div坐在同一条垂直线上。“忽略描述的上下文？沟通失误会导致沟通失误。这将阻止OP在内部使用更多的块级元素，这可能是他想要做的。而且还需要
clear
在之后清除浮动。实际上，不完全是这样。一个应用了
float
的内联元素（如果我没记错我的规格的话）将显示为block。因此，实际上，应用
inline
以及
float
对块级元素没有任何作用。
.box {
    width:200px;
    height:200px;
    padding:10px;
    display:inline-block;
    border:1px solid black;
    text-align:center;
}​

.box {
    width:200px;
    height:200px;
    padding:10px;
    border:1px solid black;
    text-align:center;
}
div.box{display:inline;float:left;}