html - 拉伸(stretch)一个 div 使其与其下方 2 个 div 的宽度之和相匹配

Question

我试图让 3 个 div 对齐，使顶部的 div 拉伸(stretch)到底部 2 个 div 的宽度之和。 Attached Image of the expected div positioning 我尝试使用 display : table-row 作为 div。

<div id="main_div" style="display: table-row">
        <div id='col1' style="width: 300px; display: table-cell;">
            <div style="display: table-row">
                <div  style="width: 300px; display: table-cell;text-align :right;border-style: groove;">
                    <h1>This is heading 1</h1>
                </div>
            </div>
            <div style="display: table-row">            
                <div  style="width: 150px; display: table-cell;white-space: nowrap;border-style: groove; border-color: green;">
                    abc: <input type="text" name="def">
                </div>
                <div  style="width: 150px; display: table-cell;white-space: nowrap;border-style: groove; border-color: red">
                    def: <input type="text" name="ghi">
                </div>                                                      
            </div>
        </div>
    </div>

谢谢

Answer 1

已更新

您也可以通过 div 元素通过使用 css 的 float: left 和 display: inline-block 属性来实现这一点。

.row:before,.row:after{
  content:"";
  display:table;
}
.row:after{
  clear:both;
}
.row{
  border: 1px solid #000;
  text-align:center;
}
.full{
  width:100%;
  float:left;
  display:inline-block;
  padding: 20px;
  box-sizing:border-box;
}
.half{
  width:50%;
  float:left;
  display:inline-block;
  padding: 20px;
  box-sizing:border-box;
  border-top:1px solid #000;
  border-right: 1px solid #000;
}
.half:last-of-type{
  border-right:0;
}

<div class="row">
  <div class="full">
    DIV 1
  </div>
  <div class="half">
    DIV2
  </div>
  <div class="half">
    DIV3
  </div>
</div>

实现这种布局的最佳方式是使用table。请检查以下代码:

table{
  border-spacing: 0;
  border-collapse: collapse;
  text-align: center;
}
td{
  border: 1px solid #000;
  padding:30px;
}

<table>
  <tbody>
    <tr>
      <td colspan="2">DIV 1</td>
    </tr>
    <tr>
      <td>DIV 2</td>
      <td>DIV 3</td>
    </tr>
  </tbody>
</table>