图片文字不再同一行显示

代码:

<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>

目前的样式:
clipboard.png

UI效果图:

clipboard.png

阅读 4.5k
3 个回答

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

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

图片浮动float
文字浮动flaot(记得给宽高)

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题