方法1:浮动
通过浮动使两个div在同一行显示,两个div同时左浮动(float: left)或者有浮动(float: right)。
方法2:display: inline-block转为行内块
使用display: inline-block将两个盒子转为行内块,实现两个div同行显示。
注意:使用display: inlien-block转为行内块之后,两个行内块儿元素之间有缝隙。
产生缝隙的原因:
元素被当成行内元素排版的时候,元素之间的空白符(空格、回车换行等)都会被浏览器处理,根据white-space的处理方式(默认是normal,合并多余空白),我们这里是因为div1和div2两个盒子代码的之间的"回车"被处理成为了缝隙。我们将两个div的代码写在一行就可以解决了
<div class="div1">div1</div><div class="div2">div2</div>