Beautiful layout <figure>

A

Andrey Shaydurov2011-08-07 20:51:23

css

Andrey Shaydurov, 2011-08-07 20:51:23

Beautiful layout

I'm afraid that it will turn out to be a repetition, or that the answer is on the surface, but I just can't think of a solution. I would like to make beautiful, as in textbooks, image footnotes, also in semantic layout, and without Javascript.
Challenge: Organize with CSS

<figure>
  <img />
  <figcaption>
    Some inline text or <div>block elements</div>
  </figcaption>
</figure>

so that figcaption is never wider than the image. Image - max-width: 640px. Figure - float: left.

The display is parsed by the RSS reader, so images can be of various sizes and ratios.

An example of what needs to be fixed can be found at librapost.ru/rss-items/4e3a740733d21610b8004a02 , there is indeed a figure without a float.