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

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

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

具体参考：

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

给第一二个div添加内容就不会了，或者加vertical-align:top;

用盒子布局吧，把这三个div再包一层：

.item{
        margin:1px;
        width:200px;
        height:200px;
        background-color:red;
        display:inline-box;
    }

<div style="display:flex">
<div class="item"></div>
<div class="item"></div>
<div class="item">3</div>
</div>

我们把div设置为inline:

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
inline元素设置width,height属性无效。
inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

我们把div 设置成block

block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
block元素可以设置margin和padding属性。

我们把div设置成inline-block

简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

对于inline-block元素来说，他的基线取决于元素本身的特性，在该元素中没有行内子元素（DOM树的子元素，有块子元素不算但是块子元素中有行元素算）的时候或者overflow不为visible，该inline-block的基线为margin-bottom的下边界。否则，以该元素中最后一个行框子元素的基线为该元素的基线

所以插入内容的div 的基线会下移动。

所以解决方案就是
第一个办法是为div设置vertical-align为top
第二个方法是设置overflow设置为hidden
第三个方法是外面设置父节点，然后给父节点设置display:flex
第四个方法：给div设置float为left