0

Consider the following example:

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

Is there a css-only approach that makes the caption take the width of the image that would work on the majority of browsers, so no please no bleeding edge css?

EDIT: A solution without intrinsic width (min-content).

EDIT: I added text below the figure that should also be below the caption.

user3612643
  • 4,076
  • 4
  • 25
  • 43

2 Answers2

0
figure{
    display: table;
    width: 1px;
}
Mahatmasamatman
  • 1,488
  • 2
  • 5
  • 19
0

Updated Code https://jsfiddle.net/harshapache/sLeab4zg/

   figure {
      position: relative;
      display: table-caption;
   }
harsh_apache
  • 408
  • 4
  • 10