对齐图形及其 text/figcaptions

Question

我有三个数字，每个都有不同的大小和不同的图形说明。
我希望它们以内联方式显示（因此，如果最后一个数字不适合该行，它将移动到下一行）。

这是我目前所拥有的：https://jsfiddle.net/Jonjei/31kteL68/6/（预览角不像我在正常 window 中看到的那样准确）
图片是随机占位符，不属于我。

问题： figcaptions 占据了所有 space 并将下一个数字推到下一行。

我正在寻找的解决方案：
使每个图形说明文字停在其图形的边缘，并在图形说明内移动到新的一行。
如果图形（及其图形说明）太大而无法放在第一行，则将其移至下一行。

我们非常欢迎任何其他一般性建议和技巧。我设法使文本使用单行 table，但是当我希望最后一个数字移动到下一行时这无济于事。

Answer 1

.container {

 border: 5px transparent solid;
 border-radius: 2px;
 margin: 2% 10% 2% 10%;
 padding: 0px 7% 0px 7%;
}
.fig-container{
  display:flex;
  width:100vw;
}
figure{
  flex-grow:1;
  display:block;
  text-align:left;
  background:#e3e3e3;
}

<!-- images are placeholders and belong to their respective owners -->
<div class="container" align="center">
<h1 style="font-size: 1.5rem">OTHER NOTES</h1>
<div class="fig-container">
  <figure><img src="https://is3-ssl.mzstatic.com/image/thumb/Purple5/v4/da/83/ae/da83ae00-d126-1200-1588-c74c59aa1a38/source/256x256bb.jpg" alt=""><figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption></figure>

  <figure><img src="https://www.petmd.com/sites/default/files/petmd-puppy-weight.jpg" alt=""><figcaption>Duis ut nulla sed dolor ultrices ornare sed pharetra ligula. Phasellus sapien augue, eleifend ut odio vel, suscipit auctor purus.</figcaption></figure>

  <figure><img src="https://vetstreet-brightspot.s3.amazonaws.com/56/d831705c9f11e19be6005056ad4734/file/puppy_training-tips-335mk022012-200454626-001.jpg" alt=""><figcaption>Proin volutpat dictum leo eget pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</figcaption></figure>
</div>

对齐图形及其 text/figcaptions

Aligning figures and their text/figcaptions

html

css

alignment

figure