Zurb Foundation 均衡网格：如何将内容放置在网格单元格内 div 的底部
Zurb Foundation equalised grid: how to position content at bottom of div inside grid cell
有很多关于如何在 div 底部放置内容的问题，现在使用 Flexbox 并不难做到。
不过，我使用的是带均衡功能的 Zurb Foundation 网格。均衡是必要的，因为我的 cells 包含一个图像（固定高度）和一个标题 - 这是可变长度的。
标题包括一个标题（位于图像的正下方）和一个副标题，我想将其置于图像卡片的底部。
这是一个 Codepen，展示了我正在使用的内容：https://codepen.io/arokat/pen/ZEbzOMp
我尝试了很多建议的解决方案（flexbox，在 .image-card-caption__title 上设置 height: 100% 等），但我就是无法让字幕粘在底部 + get正确的整体外观。 （设置绝对定位+ bottom: 0 甩掉整个布局...）
我认为问题在于 div 的高度直到 JS 均衡代码为 运行 之后才设置 - 所以任何 CSS 规则都应用在错误的位置时间。
我真的很想避免在 .image-card-caption div 上设置固定高度，因为标题和副标题的长度可能相差很大。
有什么想法吗？提前谢谢你:)
目前的情况：
我希望它看起来如何：
（近似值 - 对齐并不完美，我只是用 <br /> 标签来给出想法）
我继续做了一些与您所做的事情非常相似的某些代码修改，这些代码修改使用改进和简化结构的 Foundation 组件或帮助实现您需要的 "hacks"。
你可以看看on this CodePen
让我解释一下我做了什么。
- 当您使用网格布局时，Foundation 可以让您选择 Block Grids。它真的很简单，也很容易使用，解决了计算每个断点必须有多少列的需要。我所做的是
<div class='grid-x grid-padding-x small-up-1 medium-up-2 large-up-3'>
它的作用是向容器表明它将在小型设备上有 1 个块 per-row，在中型设备上有 2 个块 per-row，在上有 3 个块 per-row大型设备及以上。之后你所要做的就是像这样定义一个单元格：
<div class='cell'>
如您所见，这比 <div class='cell medium-6 large-4'> 简单多了，而且省去了很多输入。
- 上面我特意问过你是否需要使用
img标签中的图片。为什么？我喜欢将 transparent spacer 与此 svg 元素一起使用。真的很轻
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E">
它的作用是创建一个 1x1 SVG 图像，但由于它没有特定的宽度和高度，它只有一个比例为 1:1 的 viewBox，它基本上是一个正方形。这样它就占用了可用的 space 并创建了一个响应式方形。因为它是 transparent 你可以使用原始图像作为 parent 元素的背景。
这样，您的 .image-card__image 元素在每个 .image-card 元素中将始终具有相同的比例，从而允许您专门为标题使用 data-equalizer。
- Data-equalizer 实际上可以用在多个元素上，同步多个高度，但本例中的结构并不真正需要这样做。我所做的基本上是将
data-equalizer 命名为 title（您可以查看 here 的更多信息），然后我将 data-equalizer-watch='title' 参数分配给标题容器元素。
此外，我没有使用您对 .image-card__image 的 flex 定义。使用 SVG 它们并不是真正必要的。
这些改变对你有用吗？
有很多关于如何在 div 底部放置内容的问题，现在使用 Flexbox 并不难做到。
不过，我使用的是带均衡功能的 Zurb Foundation 网格。均衡是必要的，因为我的 cells 包含一个图像（固定高度）和一个标题 - 这是可变长度的。
标题包括一个标题（位于图像的正下方）和一个副标题，我想将其置于图像卡片的底部。
这是一个 Codepen，展示了我正在使用的内容：https://codepen.io/arokat/pen/ZEbzOMp
我尝试了很多建议的解决方案（flexbox，在 .image-card-caption__title 上设置 height: 100% 等），但我就是无法让字幕粘在底部 + get正确的整体外观。 （设置绝对定位+ bottom: 0 甩掉整个布局...）
我认为问题在于 div 的高度直到 JS 均衡代码为 运行 之后才设置 - 所以任何 CSS 规则都应用在错误的位置时间。
我真的很想避免在 .image-card-caption div 上设置固定高度，因为标题和副标题的长度可能相差很大。
有什么想法吗？提前谢谢你:)
目前的情况：
我希望它看起来如何：
（近似值 - 对齐并不完美，我只是用 <br /> 标签来给出想法）
我继续做了一些与您所做的事情非常相似的某些代码修改，这些代码修改使用改进和简化结构的 Foundation 组件或帮助实现您需要的 "hacks"。
你可以看看on this CodePen
让我解释一下我做了什么。
- 当您使用网格布局时，Foundation 可以让您选择 Block Grids。它真的很简单，也很容易使用，解决了计算每个断点必须有多少列的需要。我所做的是
<div class='grid-x grid-padding-x small-up-1 medium-up-2 large-up-3'>
它的作用是向容器表明它将在小型设备上有 1 个块 per-row，在中型设备上有 2 个块 per-row，在上有 3 个块 per-row大型设备及以上。之后你所要做的就是像这样定义一个单元格：
<div class='cell'>
如您所见，这比 <div class='cell medium-6 large-4'> 简单多了，而且省去了很多输入。
- 上面我特意问过你是否需要使用
img标签中的图片。为什么？我喜欢将 transparent spacer 与此svg元素一起使用。真的很轻
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E">
它的作用是创建一个 1x1 SVG 图像，但由于它没有特定的宽度和高度，它只有一个比例为 1:1 的 viewBox，它基本上是一个正方形。这样它就占用了可用的 space 并创建了一个响应式方形。因为它是 transparent 你可以使用原始图像作为 parent 元素的背景。
这样，您的 .image-card__image 元素在每个 .image-card 元素中将始终具有相同的比例，从而允许您专门为标题使用 data-equalizer。
- Data-equalizer 实际上可以用在多个元素上，同步多个高度，但本例中的结构并不真正需要这样做。我所做的基本上是将
data-equalizer命名为title（您可以查看 here 的更多信息），然后我将data-equalizer-watch='title'参数分配给标题容器元素。
此外，我没有使用您对 .image-card__image 的 flex 定义。使用 SVG 它们并不是真正必要的。
这些改变对你有用吗？