css - 像带有行跨度的表一样显示 div

Question

<div class="div1">1</div>
<div class="div2">2</div>
<div class="div2">3</div>

.div1 { 
    border: 1px solid red;
    float: left;
    width: 20px;
}
.div2 {
    border: 1px solid green;
    width: 100%;
}

请查看我的代码 JS Fiddle

我想让 div 1 拉伸(stretch) div 2 和 3 的高度，就像您对表格的行跨度所做的那样。

我对如何在 div 中处理表格内容不够熟练，无法解决这个问题。

谢谢!

Answer 1

您可以使用表格/表格单元格显示 css 选项。

已更新修复了拉伸(stretch)问题。

<div style="display:table">
    <div style="display:table-cell;height:100%;" class="div1">
        1
    </div>
    <div style="display:table-cell;width:100%">
        <div class="div2">2</div>
        <div class="div2">3</div>
    </div>
</div>

JSFiddle 链接:https://jsfiddle.net/pho5p7cc/8/