html - 具有合并行的 Div 标签

Question

我正在尝试实现下图中显示的内容。 在网上找到了一些链接，人们建议在其中使用 table-cell。试过了，但没有得到确切的结果。有没有更好的标准方法来实现这一目标？请建议。

尝试过的代码:

CSS

.left, .right{
    display:table-cell;

HTML

<div class=left>
   <div> Cell A text ... </div>
   <div> Cell B text ... </div>
</div>
<div class=right>
   <div> Cell C text ... </div>
</div>

Answer 1

为什么不这样做:

Demo Fiddle

HTML

<div class='table'>
    <div class='cell'>
        <div class='table'>
            <div class='cell'>Cell A</div>
        </div>
        <div class='table'>
            <div class='cell'>Cell B</div>
        </div>
    </div>
    <div class='cell'>Cell C</div>
</div>

CSS

.table {
    display:table;
    width:100%;
}
.cell {
    display:table-cell;
    border:1px solid black;
    width:50%;
    height:100px;
    vertical-align:middle;
}