'display：table;'在容器和'display：table-cell;'对孩子们？

Question

是否可以在容器元素上使用display: table;，在其子容器上使用display: table-cell;，或者是否应该有一个包含display: table-row;的包装器？

我的意思是......

<div style="display: table;">
   <div style="display: table-cell;"></div>
   <div style="display: table-cell;"></div>
</div>

或

<div style="display: table;">
   <div style="display: table-row;">
      <div style="display: table-cell;"></div>
      <div style="display: table-cell;"></div>
   </div>
</div>

当你有多行时，

display: table-row;才有意义。但在我的情况下，我只是将它用于多列响应式布局（显然意味着单行），因为它不如使用float或其他东西那么复杂。

所以，问题是，对于单行多列布局，可以在容器元素上使用display: table;，在其子元素上使用display: table-cell;，而不使用{{1}两者之间的包装？

我见过一些网站这样做（即他们不使用display: table-row;）。 Here's an example

Answer 1

将在您的外div（表格）中生成一个anonymous table row box以包含所有内部div（表格单元格），因此如果您认识您，则完全可以接受希望所有表格单元格都属于同一行。