我创建了这个 jsFiddle显示问题。
代码如下:
HTML:
<div id="container">
<div id="left-col">
LEFT
</div>
<div id="right-col1">
RIGHT1
</div>
<div id="right-col2">
RIGHT2
</div>
<div id="right-col3">
RIGHT3
</div>
</div>
CSS:
#container {
display: grid;
grid-template-columns: 15% 1fr;
grid-template-areas:
"left_area right_area1"
"left_area right_area2"
"left_area right_area3";
}
#left-col {
grid-area: left_area;
}
#right-col1 {
grid-area: right_area1;
}
#right-col2 {
grid-area: right_area2;
}
#right-col3 {
grid-area: right_area3;
}
当我在左栏中有大的垂直内容时,它会自动拉伸(stretch)右栏,而我在右栏中的内容没有按我想要的方式显示。
我的目标是在无法取消链接的情况下,让右列成为两列垂直尺寸的驱动因素。
有没有办法:
- 使网格的垂直尺寸独立(似乎不太可能或者它不再是网格)?
- 授权左侧列溢出,以便右侧列的大小优先?
当然感谢任何其他帮助。
最佳答案
这是因为您的容器 div 根据内部较大的 div 增长。
如果你想让右边的列独立于左边的列,你必须创建 2 个容器 div :
<div id="container-left">
<!-- Your left content -->
</div>
<div id="container-right">
<!-- Your right content -->
</div>
关于html - 网格布局 2 列垂直尺寸相互独立,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55156184/