html - 基于 的结构中的 Colspan 替代方案

Question

我想使用 div元素来创建类似表格的布局。

我想要什么

.tableStyle td {
  background: red;
  color: #fff
}

.contentBox {
  min-height: 200px;
}

<table class="tableStyle" width="100%" cellspacing="10">
  <tr>
    <td width="25%">
      <div class="contentBox">One</div>
    </td>
    <td width="25%">Two</td>
    <td width="50%" colspan="2">Three</td>
  </tr>
  <tr>
    <td colspan="2">
      <div class="contentBox">Four</div>
    </td>
    <td colspan="2">Five</td>
  </tr>
</table>

我有什么

.table {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 10px;
  color: #fff
}

.table .row {
  display: table-row;
}

.table .table-cell {
  display: table-cell;
  background: red;
  width: 50%;
}

.contentBox {
  min-height: 200px;
}

.table .smlCell {
  width: 25%;
}

.table .table {
  border-spacing: 0;
}

<div class="table">
  <div class="row">
    <div class="table-cell">
      <div class="table">
        <div class="row">
          <div class="table-cell smlCell">
            <div class="contentBox">One</div>
          </div>
          <div class="table-cell smlCell">
            Two
          </div>
        </div>
      </div>
    </div>
    <div class="table-cell">Three</div>
  </div>
  <div class="row">
    <div class="table-cell">
      <div class="contentBox">Four</div>
    </div>
    <div class="table-cell">Five</div>
  </div>
</div>

我希望标记为“一”和“二”的单元格之间的间距相等。

我还希望一行中的所有单元格具有相同的高度。

在网上搜索后，我知道有一些限制或问题对于 display: table例如缺少 colspan/rowspan 等价物，这可能有助于我实现目标。

无论如何(除了形式 <table> )创建这个？

Answer 1

当然有!

Demo Fiddle

HTML

<div class='table'>
    <div class='row'>
        <div class='table'>
            <div class='cell'>One</div>
            <div class='cell'>Two</div>
        </div>
        <div class='cell'>Three</div>
    </div>
    <div class='row'>
        <div class='cell'>Four</div>
        <div class='cell'>Five</div>
    </div>
</div>

CSS

html, body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.table {
    display:table;
    width:100%;
    height:100%;
}
.cell {
    display:table-cell;
    width:50%;
}
.row {
    display:table-row;
}
.cell {
    background:red;
    color:white;
    border:5px solid white;    
}