使用表或flexbox创建类似网格的UI

时间:2017-07-31 14:57:09

标签: javascript html css html-table flexbox

我需要创建一个包含行和列的网格状UI。 主要要求是列和行适应单元格内容。 例如,第1列的文本宽度位于第1行第1列的单元格中。 第1行的高度是第1行第2列的单元格高度。

单元格内容是文本和单选按钮。

我可以使用flex-box或只是使用旧桌子吗? 有什么例子吗?

使用flexbox我想我需要嵌套的flexbox?不确定。

enter image description here

1 个答案:

答案 0 :(得分:2)

如果您所呈现的信息在表格上是非常表格的,那么使用表格是有道理的,因为它符合您所呈现的信息并且按照您所说的方式工作在浏览器中。

E.g:

.target, .target td {
  border: 1px solid #ddd;
}
.special {
  text-align: center;
}
<table class="target">
  <tbody>
    <tr>
      <td>Column width is width of this text</td>
      <td class="special">Row height is height of this text</td>
    </tr>
    <tr>
      <td>Text</td>
      <td>Text</td>
    </tr>
  </tbody>
</table>

注意:您有一个“特殊”单元格,其中心文本而不是左对齐文本;我在上面使用过special课程。

如果信息不是表格,从语义上讲,您可以使用其他类型的元素来呈现它,并使用CSS调整其显示特性以获得所需的演示文稿。特别是all vaguely-modern browsers support使用display: tabledisplay: table-rowdisplay: table-cell。 E.g:

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

.target, .target .cell {
  border: 1px solid #ddd;
}
.special {
  text-align: center;
}
<div class="target">
  <div class="row">
    <div class="cell">Column width is width of this text</div>
    <div class="cell special">Row height is height of this text</div>
  </div>
  <div class="row">
    <div class="cell">Text</div>
    <div class="cell">Text</div>
  </div>
</div>

我使用过rowcell类,但您也可以使用结构选择器。