html - 如何展平嵌套的 div 以在 CSS 网格中显示它们？

Question

我从一个应该有两列宽的对象生成一个表(使用 vue.js)。每个列都来自对象的键和值。这等效于以下实际 HTML:

<div id="table">
  <div>
    <div>
      this is something long on the first row
    </div>
    <div>
      short 1st row
    </div>
  </div>
  <div>
    <div>
      wazaa 2nd row
    </div>
    <div>
      wazii 2nd row
    </div>
  </div>
</div>

我使用 CSS 网格将这些 div 格式化为 2x2 网格，这是我期望的

this is something long on the first row | short 1st row
wazaa 2nd row                           | wazii 2nd row

执行此操作的代码:

#table {
  display: grid;
  grid-template-columns: auto 1fr;
}

<div id="table">
  <div>
    <div>
      this is something long on the first row
    </div>
    <div>
      short 1st row
    </div>
  </div>
  <div>
    <div>
      wazaa 2nd row
    </div>
    <div>
      wazii 2nd row
    </div>
  </div>
</div>

结果不是我所期望的:两个最深的 div 表现得像它们应该在 grid 显示之外:它们堆叠在彼此之上。

我希望它们继承网格行为:根据列模板对齐。如何实现？

Answer 1

您可以使用 display:contents ( https://caniuse.com/#feat=css-display-contents ) 来解决这个问题:

#table {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap:10px;
}

#table > div {
  display:contents;
}

<div id="table">
  <div>
    <div>
      this is something long on the first row
    </div>
    <div>
      short 1st row
    </div>
  </div>
  <div>
    <div>
      wazaa 2nd row
    </div>
    <div>
      wazii 2nd row
    </div>
  </div>
</div>

或者使用如下显示表:

#table {
  display: table;
}

#table > div {
  display:table-row;
}
#table > div > div {
  display:table-cell;
  padding:5px;
}
#table > div > div:first-child {
  white-space:nowrap;
  width:10%;
}

<div id="table">
  <div>
    <div>
      this is something long on the first row
    </div>
    <div>
      short 1st row
    </div>
  </div>
  <div>
    <div>
      wazaa 2nd row
    </div>
    <div>
      wazii 2nd row
    </div>
  </div>
</div>