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

Question

我正在尝试重新创建类似附件的屏幕快照。请注意，带有“另一个文本”的块与左列对齐。每个灰色框将是一个图像。还应考虑到文本可以是多行。

这是我到目前为止的内容：https://jsfiddle.net/chux/qgbw0moz/51/

问题是，当第一个列的行数多于第二个列时，框的底部将对齐，而不是图像的底部。

如何对齐它们？

.container {
  width: 100%;
}

img {
  display: block;
  margin: 0;
  max-width: 100%
}

.row {
  display: flex;
  align-items: strech;
}

.row>.col {
  flex-grow: 1;
}

.row-col {
  background: grey;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  display: flex;
}

.first-col {
  background: red;
}

.second-col {
  background: green;
}

.third-col {
  background: pink;
}

<div class="container row">

  <div class="col first-col">
    <img src="https://placeimg.com/450/480/animals">
  </div>

  <div class="col">
    <div class="row-col">

      <div class="col second-col">
        <img src="https://placeimg.com/400/180/animals">
      </div>

      <div class="col third-col">
        <img src="https://placeimg.com/400/180/animals">
      </div>

    </div>
  </div>
</div>

Answer 1

那么，这很好且简单-只需为每张照片下方显示的文本赋予固定的高度即可。您将必须根据您的“平均文本高度”来决定此高度，并使用overflow:hidden或使用可能的最大值。

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

这是一个工作的jsfiddle： https://jsfiddle.net/scooterlord/7wqmf1Lr/

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

如果您愿意，我也可以帮助您实现响应能力-尽管超出了此问题的范围。

将img标记替换为div和background-image：

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

添加了CSS：

.img {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
}

工作中的小提琴。 https://jsfiddle.net/scooterlord/7wqmf1Lr/13/