时间戳

首页 > 解决方案 > 对齐图形及其文本/图形标题

html - 对齐图形及其文本/图形标题

问题描述

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

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


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

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


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

标签： htmlcssalignmentfigure

解决方案

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

推荐阅读