我们把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