html - CSS - 使父子div的高度相等

Question

我正在尝试创建的内容如下所示:

 --------------------------------------------------
 |                        |           |           |
 |                        | .box1     | .box2     |
 |                        |           |           |
 |   .image               -------------------------
 |                        |                       |
 |                        |     .description      |
 |                        |                       |
 |                        |                       |
 --------------------------------------------------   

与彼此相比，.box1 和 .box2 的高度相同(例如 flex: 1;)，并且 .box1、.box2 和 .description 周围的图像和外壳大小相同

我似乎找不到一种方法可以做到这一点，我认为 Flexbox 示例在这种情况下很少见。

我认为表格可以用于此示例，具有如下所示的嵌套表格:

<table class="parent-wrapper">
  <tr>
    <td class="image">
      <img src="...."/>
    </td>
    <td class="parent-box">
      <table class="child-wrapper">
        <tr>
          <td class="box1">.box1</td>
          <td class="box2">.box2</td>
        </tr>
        <tr>
          <!-- I don't know a workaround for this as well -->
          <td class="description" colspan="2">.description</td>
        </tr>
      </table>
    </td>
 </tr>
</table>

但结果如下:

我想要的是 'image' td 的大小与 'child-wrapper' td 的高度相同

所以这个:(用硬编码高度制作)

Answer 1

flexbox 示例:

不需要表格!

编辑:已更新以满足要求。在 上使用(简写的 flex-basis)20% 和 min-width 的 250px。 image 以符合您的口味。请注意，我通过样式设置背景图像，因为我假设它将来自后端。

也许您还想在主容器上设置最小高度。

.block {
  display: flex;
}

.image {
  flex: 0 1 20%;
  min-width: 250px;
  background: #f00;
  color: #fff;
  
  background-size: cover;
  background-position: 50% 50%;
}

.image img {
  display: block;
  width: 100%;
  height: auto;
}

.content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.boxes {
  display: flex;
  flex: 1;
}

.box1 {
  background: cyan;
  flex: 1;
}

.box2 {
  background: yellow;
  flex: 1;
}

.description {
  flex: 1;
  background: #531777;
  color: #fff;
}

<div class="block">
  <div class="image" style="background-image: url('https://s-media-cache-ak0.pinimg.com/236x/c8/e8/cc/c8e8cc83e6eeb60061ba11c9d8ba9a11.jpg')">
  </div>
  <div class="content">
    <div class="boxes">
      <div class="box box1">
        .box1
      </div>
      <div class="box box2">
        .box2
      </div>
    </div>
    <div class="description">
      .description
      <br>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis sed augue eu pulvinar. Cras sodales tortor ac mauris bibendum, quis sagittis quam viverra. Aliquam erat volutpat. Pellentesque ullamcorper porta metus, nec efficitur lorem vulputate quis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean vel dui et eros gravida bibendum. Nunc pulvinar commodo facilisis.
    </div>
  </div>
</div>

代码笔:http://codepen.io/veksen/pen/LRgwOy