CSS - 制作父母＆amp;儿童的身高相等

Question

我尝试创建的内容如下所示：

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

.box1和.box2相互之间的高度相同（fe flex: 1;），而.box1，.box2和.description周围的图像与shell的大小相同。

我似乎无法找到完全符合这一要求的方法，我认为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>

但结果如下：

我想要的是＆＃39;图像＆＃39; td的大小与＆＃39;子包装器的高度相同。 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>

database.openCollection()
    .then(function(collection){
        var result = collection.query(something);
        var resultObject = { result: result, collection: collection };
    })
    .then(function(resultObject){
        doSomethingSyncronousWithResult(resultObject.result);
        resultObject.collection.close();
    });

Codepen：http://codepen.io/veksen/pen/LRgwOy

Answer 2

试试这个：

.parent-1 {
  display: flex;
  flex-direction: row;
}
.parent-2 {
  display: flex;
  flex-direction: column;
  flex-basis: 400px;
  height: 250px;
}
.box-2 {
  flex-basis: 50%;
  height: 50px;
  background-color: rgb(38, 60, 99);
}
.box-3 {
  flex-basis: 50%;
  height: 50px;
  background-color: rgb(185, 195, 28);
}
.parent-3 {
  display: flex;
}

<div class="parent-1">
  <div class="box-1">
    <img src="img-1.jpg" alt="img" width="200" height="200">
  </div>
  <div class="parent-2">
    <div class="parent-3">
      <div class="box-2"></div>
      <div class="box-3"></div>
    </div>
    <div class="box-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
</div>

Answer 3

您必须在描述中包含colspan。

<td class="descrtiption" colspan="2">.description</td>

http://codebeautify.org/htmlviewer/cbea20ae

Answer 4

检查下面的代码..你会得到一些想法.. 结果屏幕截图下面的代码

table{
width:100%
}
table, th, td {
   border: 1px solid black;
  border-collapse: collapse;
  padding:5px;
}
th, td {
  padding:35px;
}

<table class="parent-wrapper">
  <tr>
    <td class="image" rowspan="2">
      Image
    </td>
    <td class="box">
      Box
    </td>
    <td class="box">
      Box
    </td>
 </tr>
  <tr>
    
    <td class="box" colspan="2">
      Description
    </td>
 </tr>
</table>