CSS - 行跨度效果答案

【问题标题】：CSS - rowspan like effectCSS - 行跨度效果
【发布时间】：2012-11-27 13:55:35
【问题描述】：

我只是想实现左列有两个合并行而右列没有合并的效果。我怎样才能实现这种布局？

html 表格看起来像 -

<table border="1" >
  <tr>
    <td rowspan="2">Div 1</td>
    <td> Div 2 </td>
  </tr>
  <tr>
    <td>Div3</td>
  </tr>
</table>

编辑：我想使用 Div 来实现这一点。我会将用户控件放在每个 div 元素中。重要的是 Div3 从 div2 下方开始，而不是在 Div1 下方。

[对不起，这是第一篇，无法添加图片]

谢谢。

【问题讨论】：

您给出的代码完美地回答了您提出的问题..？
发送你想要的布局图片，或者让问题更清楚
此人想使用 CSS 而不是使用表格。
如果您可以将图像放到网上，其他人可以为您添加图像。
需要使用 div。实现这一目标的最佳方法是什么？

标签： css

【解决方案1】：

CSS

    body {
      margin: 0;
      padding: 50px;
      background-color: #FFFFFF;
      color: #000000;
      font-family: Arial, Helvetica, sans-serif;
    }
    .tablewrapper {
      position: relative;
    }
    .table {
      display: table;
    }
    .row {
      display: table-row;
    }
    .cell {
      display: table-cell;
      border: 1px solid red;
      padding: 1em;
    }
    .cell.empty
    {
      border: none;
      width: 100px;
    }
    .cell.rowspanned {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100px;
    }

<div class="tablewrapper">
      <div class="table">
        <div class="row">
          <div class="cell">
            Top left
          </div>
          <div class="rowspanned cell">
            Center
          </div>
          <div class="cell">
            Top right
          </div>
        </div>
        <div class="row">
          <div class="cell">
            Bottom left
          </div>
          <div class="empty cell"></div>
          <div class="cell">
            Bottom right
          </div>
        </div>
      </div>
    </div>

演示：http://www.sitepoint.com/rowspans-colspans-in-css-tables/

【讨论】：

谢谢。效果很好。通过 inline-block 使用浮动或相对定位有什么缺点吗？我并不是真的想显示表格数据，而是安排自定义用户控件
当然可以，但这是使用“纯 css”的最大缺点之一。我必须编写大量代码来替换一个词：'rowspan="2"' - 这简直是疯了；/

【解决方案2】：

2017 年引入的网格布局正是为了这个目的，而且可能更复杂。

在您的情况下，您可以使用例如inline-grid + grid-template-areas:

#page {
  display: inline-grid;
  grid-template-areas: "aside main"
                       "aside foot";
}

#page > aside {
  grid-area: aside;
  background: lightgreen;
}
#page > main {
  grid-area: main;
  background: lightpink;
}
#page > footer {
  grid-area: foot;
  background: lightblue;
}

<section id="page">
  <aside>aside 1</aside>
  <main>main 2</main>
  <footer>footer 3</footer>
</section>

【讨论】：