等效于不使用 HTML 表格的行跨度布局技巧

【问题标题】：Equivalent to rowspan layout tricks without using HTML tables等效于不使用 HTML 表格的行跨度布局技巧
【发布时间】：2016-01-14 19:21:03
【问题描述】：

我有一个简单的两列布局，右列中有两个“div”块。

有没有什么方法可以不使用表格来实现这样的布局？

我见过使用绝对定位的解决方案，但这会引发问题。

td { border-width: 1; border-style: solid; }

<table>
  <tr>
    <td rowspan='2'>Left</td> <td>Right top</td>
  </tr>
  <tr>
    <td>Right bottom</td>
  </tr>
</table>

【问题讨论】：

标签： css html-table

【解决方案1】：

我走的是 CSS 表格路线：

.container {
  display: table;
  /* arbitrary width */
  width: 300px;
}

.col {
  display: table-cell;
  vertical-align: middle;
  padding: 2px;
}

.col-left {
  margin-right: 2px;
}

.col-left .col-inner {
  line-height: 44px;
}

.col-inner {
  padding: 2px;
  border: 1px solid #000;
}

.col-inner + .col-inner {
  margin-top: 2px;
}

<div class="container">
  <div class="col col-left">
    <div class="col-inner">
      Left
    </div>
  </div>
  <div class="col col-right">
    <div class="col-inner right-top">
      Right Top
    </div>
    <div class="col-inner right-bottom">
      Right Bottom
    </div>
  </div>
</div>

【讨论】：