获取mutliple元素以在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，以便他们不会停留在同一条线上。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;