css - 相当于不使用 HTML 表格的 rowspan 布局技巧

Question

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

有没有办法不使用表格就可以实现这样的布局？

我见过使用绝对定位的解决方案，但这本身就存在问题。

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>

Answer 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>