Question

我在网格上遇到问题：由于某些原因，列的宽度大约是我想要的5倍，并且无论我如何更改，列之间的距离都完全相同。 HTML：

<div class=wrapper>
  <a href="A.html" id="A"></a>
  <a href="B.html" id="B"></a>
  <a href="C.html" id="C"></a>
</div>

和影响网格中图像链接的（相当长的）css：

.wrapper {
    display: -ms-grid;
    display: grid;
    grid-gap: 3%;
    -ms-grid-columns: 100% 3% 100% 3% 100% 3% 100% 3% 100%;
    -ms-grid-rows: 100% 5% 100%;
    grid-template-columns: 100% 100% 100% 100% 100%;
    grid-template-rows: 100% 100%;
    background-color: transparent;
    border: none;
    height: 100%;
    width: 100%;
    float: left;
    padding-left: 10%;
}

div.wrapper {
    background-color: transparent;
    border: none;
    height: 100%;
    width: 100%;
    float: left;
    padding-left: 10%;
}

.wrapper a {
    text-decoration: none;
    border-radius: 50%;
    margin-right: 4%;
    margin-left: 3%;
    margin-bottom: 5%;
    margin-top: 5%; 
    height: 0;
    width: 7%;
    padding-bottom: 7%;
    overflow: hidden;
    float: left;
}

#A {
    background: url('background.png') no-repeat;
    background-size: 100%;
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

我在这个烂摊子里搞砸了吗？

Answer 1

我认为，您的问题是css %单元使用父级的高度和宽度。您有.wrapper css类，它在链接之间定义了很大的空间。正如您在问题注释中提到的那样，如果您将100%规则中的10%更改为grid-template-columns之类的内容，则链接将变得更小。这是因为在您的.wrapper a css类中，您给了width的{{1}}和padding-bottom，并且它依靠较大的空间来使链接变大。如果增加7%或将其替换为7%或vw，它将使链接具有所需的大小。

网格元素与太平洋一样宽

1 个答案: