前端html css js 部分，div盒子错位了

Question

这三个div盒子不应该是在同一水平线上的么？
为什么第三个盒子有内容就下去了？

Answer 1

浏览器的vertical-align的默认值为baseline，有内容后会导致对齐变化，有3种解决办法
第一个方法设置vertical-align为top
第二个方法是设置overflow设置为hidden
第三个float为left布局

具体参考：

“设置display:block-inline的li或div中添加文字后，导致li或div排版掉落、错位”的原因及解决方法_titoni_yunruohan的博客-CSDN博客  情景   在了解可以通过设置display：inline-block会将块级元素拥有inline元素一行排列的特性，那么我们可能想要通过将li的display属性设置为inline-block来实现块级元素的行排列，这时候你可能说通过设置浮动float就可以解决，不着急，float的原理和实现作为补充内容会接着聊，那么接下来先通过效果图来看一下问题所在代码展示（通过设置display将li... https://blog.csdn.net/titoni_yunruohan/article/details/84455551

有帮助麻烦点下【采纳该答案】，谢谢~~