【问题标题】:Make caption take width of image [duplicate]使标题占用图像的宽度[重复]
【发布时间】:2020-06-06 22:56:15
【问题描述】:

考虑以下示例:

<figure>
  <img height="100px" src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Test.png">
  <figcaption>Very long caption that should take the width of the image</figcaption>
</figure>
<div>This text should appear below the whole figure</div>

是否有一种仅 css 的方法可以使标题采用适用于大多数浏览器的图像宽度,所以不,请不要使用最前沿的 css?

编辑:没有内在宽度(最小内容)的解决方案。

编辑:我在图下方添加了文字,该文字也应位于标题下方。

【问题讨论】:

  • 我认为您需要为此使用 javascript
  • 到目前为止你用 css 做了什么尝试?
  • width: min-content; 在图中。考虑浏览器支持。 caniuse.com/#search=width%3A%20min-content
  • @evayly 没有最小内容

标签: html css image width figcaption


【解决方案1】:

更新代码 https://jsfiddle.net/harshapache/sLeab4zg/

   figure {
      position: relative;
      display: table-caption;
   }

【讨论】:

  • 使用这种方法,图下方的文字会与标题重叠。我修改了示例以显示下面的文本。
  • 我已经更新了我的解决方案,试试这个
【解决方案2】:
figure{
    display: table;
    width: 1px;
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-02-19
    • 1970-01-01
    • 2016-09-23
    • 2020-10-12
    • 1970-01-01
    • 1970-01-01
    • 2018-10-23
    相关资源
    最近更新 更多