对齐图形及其文本/图形标题答案

【问题标题】：Aligning figures and their text/figcaptions对齐图形及其文本/图形标题
【发布时间】：2019-12-28 23:23:51
【问题描述】：

我有三个人物，每个人物都有不同的大小和不同的标题。
我希望它们内联显示（因此，如果最后一个数字不适合该行，它将移动下一行）。

这是我目前所拥有的：https://jsfiddle.net/Jonjei/31kteL68/6/（预览角与我在普通窗口中看到的不太准确）
图片是随机占位符，不属于我。

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

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

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

【问题讨论】：

标签： html css alignment figure

【解决方案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>

【讨论】：

感谢您的回答，但使用此代码，数字会从容器的一侧跑出，而不是移动到下一行。 figcaptions 仍然是正常的文本行，而不是与数字对齐。