在图像旁边定位figcaption

Question

我想添加一个figcaption，这是一个解释我的图片的段落，我想把它放在图片本身旁边（如果段落太长，我想要将文字放在下面完成旁边的空间后的图像）。我搜索了命令，也搜索了CSS，但我没有找到任何东西。

Answer 1

将图像浮动，并设置overflow: auto以确保图形包含浮动：

＆＃13;

＆＃13;

figure {
  max-width: 300px;
  overflow: auto;
}

figure img {
  float: left;
  margin: 0 1em 1em 0;
}

＆＃13;

<figure >
  <img src="http://placekitten.com/75/75" />
  
  <figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </figcaption>
</figure>

＆＃13;

＆＃13;

＆＃13;