【问题标题】:Position figcaption beside an image在图像旁边放置 figcaption
【发布时间】:2014-06-30 13:47:08
【问题描述】:

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

【问题讨论】:

标签: html css figure


【解决方案1】:

将图像向左浮动,并设置overflow: auto 以确保图形将包含浮动:

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

figure img {
  float: left;
  margin: 0 1em 1em 0;
}
<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>

【讨论】:

    猜你喜欢
    • 2011-12-15
    • 2016-01-06
    • 1970-01-01
    • 2023-02-15
    • 2020-03-21
    • 2020-04-17
    • 2016-12-22
    • 2021-07-20
    • 1970-01-01
    相关资源
    最近更新 更多