我从一个应该有两列宽的对象生成一个表(使用 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
显示之外:它们堆叠在彼此之上。
我希望它们继承网格行为:根据列模板对齐。如何实现?
最佳答案
您可以使用 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>
关于html - 如何展平嵌套的 div 以在 CSS 网格中显示它们?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54535705/