包含合并行的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;
}

Answer 2

将右列vertical-align: middle;属性添加到现有解决方案中。 Demo