0

非常感谢任何可以提供帮助的人。

我正在尝试使用 Flexbox 进行网格化，它运行良好，除非我尝试在以下情况下并排创建 2 列：

  • 1 列中有一个图像（裁剪以填充该列）
  • 1 列中有多行（图像和文本的组合）
  • 两列高度相同

我在下面包含了 2 张图片，希望能说明我正在尝试做的事情。具有讽刺意味的是，具有行跨度的元素可以解决问题，但我想要 flexbox 提供的响应能力。

希望附上的图片能说明问题。任何帮助表示赞赏！

示例图片：1 个项目旁边的 3 个堆叠项目

示例图片：2 个堆叠在 1 个项目旁边的项目

我正在使用 Bootstrap，它在我的网站上加载：https ://www.larsbot.com/但该行的高度没有按预期增长。到目前为止，我的代码的更简洁版本如下：

<div class="row">
  <div class="col-md" style="background: grey;">
    <img style="object-fit: cover;" src="/wp-content/uploads/2017/10/02_01.png" />
  </div>
  <div class="col-md">
    <div class="row">
      <div class="col-md" style="background:red;">I want this text and to fill up the remaining height of it's parent column</div>
    </div>
    <div class="row">
      <div class="col-md"><img style="object-fit: cover;" src="/wp-content/uploads/2017/10/02_02.png" /></div>
    </div>
    <div class="row">
      <div class="col-md"><img style="object-fit: cover;" src="/wp-content/uploads/2017/10/02_03.png" /></div>
    </div>
  </div>
</div>
4

0 回答 0