时间戳

首页 > 解决方案 > 无法使用 CSS Grid 消除 DIV 中图像下方的间隙

html - 无法使用 CSS Grid 消除 DIV 中图像下方的间隙

问题描述

我正在使用 CSS 网格区域创建一个两列页面，左列（产品图像）将具有水平和垂直图像，右列（选择）是一个长表单。这是一张图片：

在此处输入图像描述

基本上，我想摆脱图像和产品信息区域之间的差距。换句话说，我希望产品信息和组信息与图像底部对齐（垂直或水平）我可以消除该空间的唯一方法是通过object-fit:cover，但这会根据浏览器的宽度。我已经尝试了所有适合对象的选项，但似乎没有一个能解决这个问题。CSS GRID 根本不可能做到这一点吗？似乎很基本，我确定问题出在我身上。任何人都可以帮忙吗？

这是我的代码：

.full-container {
display:grid;
grid-template-columns: 2fr 2fr 3fr;
padding:20px;
grid-template-areas: 
" product-image product-image selection "
" product-info group-info selection "
}


.product-image {
grid-area: product-image;
}

.product-image > img {
width: 100%;
}


.selection {
grid-area: selection;
padding-left: 30px;
}

.product-info {
grid-area: product-info;
padding-right:30px;
}

.group-info {
grid-area: group-info;
}

标签： htmlcsscss-grid

解决方案

您基本上希望第二行填充高度，因此请尝试将其添加到.full-container

grid-auto-row: auto 1fr;

（也就是说，我认为在这里使用 grid 只会增加更多复杂性，而没有它也可以实现，请尝试使用 flex 代替）

推荐阅读