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>

从列优先div中创建表

1 个答案: