html - 网格布局 2 列,垂直大小相互独立
问题描述
我创建了这个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;
}
当我在左栏中有很大的垂直内容时,它会自动拉伸右栏中的内容,而我在右栏中的内容不会像我想要的那样显示。
如果不能取消链接,我的目标是让右列成为两列垂直大小的驱动因素。
有没有办法:
- 使网格的垂直尺寸独立(似乎不太可能或不再是网格)?
- 授权在左列溢出,以便右列的大小优先?
当然,任何其他帮助表示赞赏。
解决方案
这是因为您的容器 div 会根据内部较大的 div 增长。
如果您希望右列独立于左列,则必须创建 2 个容器 div :
<div id="container-left">
<!-- Your left content -->
</div>
<div id="container-right">
<!-- Your right content -->
</div>
推荐阅读
- bash - Linux sed 命令在每个正则表达式匹配时生成一个新文件
- python - 使用 TPU pod 训练 keras 模型?
- c# - 为什么我在尝试调试时偶尔会遇到断点未命中的问题?
- javascript - 文件未另存为 .png
- android - 位图返回为空
- vba - Powerpoint VBA 选择图像文件夹,将这些图像放在幻灯片上
- sql - 如何聚合循环发生的连续事件序列?
- ansible - 使用 Ansible 确保文件存在,忽略任何额外的行
- markdown - 如何使 Nextjournal 生成的内部 Markdown 链接与 Jekyll 一起使用?
- python - 列表理解中的意外行为