Question

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

我正在尝试使用Flexbox进行网格化，除非我尝试使用以下方案并排创建2列，否则它的效果非常好：

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

我在下方附上了2张图片，希望能说明我正在尝试做什么。具有讽刺意味的是，具有行跨度的元素可以解决这个问题，但我希望Flexbox提供响应能力。

希望所附的图像清晰明了。任何帮助表示赞赏!!

我正在使用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>

Flexbox - 调整多行的大小以适合相邻的col /单行

0 个答案: