图片文字不再同一行显示

Question

代码：

<div>
  <div style="display: inline-block;vertical-align: top;">
    <img src="./img/small.png" alt="">
  </div>
  <div style="display: inline-block;vertical-align: top;">
    <p>我曾经跨国山和大海，带你领略冷冻的情怀</p>
    <p>
      <img src="./img/浏览.png" alt="">
      <span>浏览</span>
      <span>565</span>
    </p>
  </div>
</div>

目前的样式：

UI效果图：

Answer 1

img 给个宽度 ， float:left ,然后后侧的文字包在一个div中，也给个宽度和float：left，，就可以了

Answer 2

你设置了inline-block是想让他们顶对其，并且成行内块元素，但是看到第二个inline-block元素没设置宽度，而文字又较多，所以导致一行放不下图片和文字的盒子，所以换行了，你给第二个行内块设置个合适的宽度width = （100% - imgWidth）,应该就可以了

Answer 3

图片浮动float
文字浮动flaot（记得给宽高）