html - 从列优先 dibs 创建表

Question

我希望 1a 和 2a 成为一行，屏幕越薄，该行就越高 - 内容将包裹在每个单元格中。

我希望 1b 和 2b 成为占据屏幕剩余空间的一行。

1a + 1b 和 2a + 2b 是列。

<div class="tbl">
  <div class="col">
    <div class="row">
      <div class="cell">1a</div>
    </div>
    <div class="row">
      <div class="cell">1b</div>
    </div>
  </div>
  <div class="col">
    <div class="row">
      <div class="cell">2a</div>
    </div>
    <div class="row">
      <div class="cell">2b</div>
    </div>
  </div>
</div>

可以用 CSS 做到这一点吗？

我试过了，但它在 Codepen 中消失了......

.tbl {
  display: table;
}

.col {
  display: table-column;
}

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

https://codepen.io/anon/pen/ZjGPme

Answer 1

display: table-column; 表现得像 HTML col tag ，这就是您的表格未显示的原因。

将 .col 替换为 table-cell，将 .cell 替换为 table-row

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

参见文档，Css display class

您还可以使用此工具了解如何将 html 表格转换为 CSS:https://divtable.com/converter/

.tbl {
  display: table;
  width: 100%;
}

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

<div class="tbl">
  <div class="col">
      <div class="cell">1a</div>
      <div class="cell">1b</div>
  </div>
  <div class="col">
      <div class="cell">2a</div>
      <div class="cell">2b</div>
  </div>
</div>