html - 获取多个元素以在CSS中与文本内联显示

Question

我需要设计一个看起来像这样的段落

我在对齐所有元素时遇到问题，所以他们喜欢那样，主要问题是让共享链接在图片下方，同时让文本将它们都内联。

我已经尝试过各种组合，但到目前为止还没有成功。

<div style="display:inline-block;">
  <div style="display:inline-block;">
    <img src="resources/test.png" height="100" width="100">
    <label style="position: relative;bottom:0;left:0;">Share</label>
  </div>
  <label style="display:inline-block; font-size: 150%;">Video Title</label>
  <span>
             sdfddd dddd ddddd dddddd dddddd dddd dddd dds d sd fsdfsd fsd fsghf gjfghfg
        </span>
</div>

Answer 1

你可以简单地float有图像和链接的 div。然后制作链接(或图像)display:block，这样它们就不会停留在同一行。

<div style="display:inline-block;max-width:300px;">
  <div style="display:inline-block;float:left;text-align:center;">
    <img src="https://lorempixel.com/100/100/" height="100" width="100">
    <label style="display:block">Share</label>
  </div>
  <label style="display:inline-block; font-size: 150%;">Video Title</label>
  <span>
             Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume Lorem ipsume
        </span>
</div>