Html 将两个立柱（第二个立柱上有两个项目）与基线对齐

我正在尝试重新创建一些东西，比如附带的屏幕截图。请注意，带有“另一个文本”的块与左列对齐。每个灰色框将是一个图像。还要考虑到文本可以是多行

这就是我到目前为止所做的：

问题是，当第一列的线条多于第二列时，框的底部将对齐，而不是图像的底部

如何调整它们

.container{
宽度：100%；
}
img{
显示：块；
保证金：0；
最大宽度：100%
}
.行{
显示器：flex；
对齐项目：拉伸；
}
.row>.col{
柔性生长：1；
}
.罗列山口{
背景：灰色；
弯曲方向：立柱；
证明内容：之间的空间；
身高：100%；
显示器：flex；
}
第一上校{
背景：红色；
}
第二上校{
背景：绿色；
}
第三栏{
背景：粉红色；
}

---

因此，这里是好的和简单的-只需给每张照片下显示的文本指定一个固定的高度。您必须根据“平均文本高度”决定此高度，并使用

溢出：隐藏
或使用可能的最高值

.subtitle {
  line-height:20px;
  height:40px;
  overflow:hidden;
}

下面是一个正在工作的JSFIDLE：

编辑：这里是另一种伪造的方法。对于第一列，不要使用
img
，只需使用带有背景图像的
div
元素即可。安全地假设第二列可能具有可变高度，使用第一列上的背景图像展开
div
，以使用第一列的所有高度，然后为下面的单个或多个文本添加第二行。这对于响应来说可能有点棘手-例如将背景图像
div
的高度更改为绝对值，或者添加相同文本的多个层以在特定分辨率下隐藏/显示（或者使用JS），但这肯定是可行的，并且是解决问题的直接方法

如果您愿意，我也可以帮助您实现响应性，尽管这超出了这个问题的范围

用
div
和
背景图像替换
img
标签：

<div class="img" style="background-image:url(https://placeimg.com/400/480/animals)">
</div>

工作小提琴。
因此，这里是好的和简单的-只需给每张照片下显示的文本指定一个固定的高度。您必须根据“平均文本高度”决定此高度，并使用
溢出：隐藏
或使用可能的最高值

.subtitle {
  line-height:20px;
  height:40px;
  overflow:hidden;
}

下面是一个正在工作的JSFIDLE：

编辑：这里是另一种伪造的方法。对于第一列，不要使用
img
，只需使用带有背景图像的
div
元素即可。安全地假设第二列可能具有可变高度，使用第一列上的背景图像展开
div
，以使用第一列的所有高度，然后为下面的单个或多个文本添加第二行。这对于响应来说可能有点棘手-例如将背景图像
div
的高度更改为绝对值，或者添加相同文本的多个层以在特定分辨率下隐藏/显示（或者使用JS），但这肯定是可行的，并且是解决问题的直接方法

如果您愿意，我也可以帮助您实现响应性，尽管这超出了这个问题的范围

用
div
和
背景图像替换
img
标签：

<div class="img" style="background-image:url(https://placeimg.com/400/480/animals)">
</div>

工作小提琴。
如果文本较长，内容仍然会中断，因为它在桌面上可以跨2行，但在手机上可以跨3行。就是这样，问题是文本是可变的。我不能/不应该将其设置为固定高度。对于较小的分辨率，正确的方法是堆叠内容块，对吗？此外，这个解决方案依赖于文本-我的意思是，这里不应该有太多的文本。如果它只是一个部分（这基本上意味着维护工作量很低），那么就可以实现一个更定制的解决方案。是的，它们将堆叠起来。但我不知道是两行还是三行。此外，大屏幕上的三行（1560px宽）可能会产生，ipad上可能会有5行。因此，到目前为止，我还没有意识到这意味着要填满一个完整的容器——由于缺乏描述，我假设这个组件将使用容器中较小的一部分——例如medium的博客。然后，另一个问题出现在脑海中，使用的图像是否与示例中的图像的比例完全相同？如果文本较长，内容仍会中断，因为它可以在桌面上跨2行，但在手机上跨3行。就是这样，问题是文本是可变的。我不能/不应该将其设置为固定高度。对于较小的分辨率，正确的方法是堆叠内容块，对吗？此外，这个解决方案依赖于文本-我的意思是，这里不应该有太多的文本。如果它只是一个部分（这基本上意味着维护工作量很低），那么就可以实现一个更定制的解决方案。是的，它们将堆叠起来。但我不知道是两行还是三行。此外，大屏幕上的三行（1560px宽）可能会产生，ipad上可能会有5行。因此，到目前为止，我还没有意识到这意味着要填满一个完整的容器——由于缺乏描述，我假设这个组件将使用容器中较小的一部分——例如medium的博客。然后另一个问题出现在脑海中，使用的图像与示例中的图像的比例是否完全相同？使用绝对位置或省略号是否合适？查看以下省略号示例：。我使用
和
@Jake集成了您的图像，这不是我希望的解决方案，但到目前为止，它似乎是唯一的解决方案。这是我最终得到的解决方案：使用绝对定位或省略号是否合适？查看这个省略号示例