Question

我有两个大小相等的图像。我有一个带有一列两行的网格。我想将一张图像移到第二行，但是无论我做什么，它都不会向下移动。我能做什么？代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .container{
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr 1fr;
        }
        .flex{
            display: flex;
            justify-content: center;
            align-items: space-evenly;
        }

        .flex img:nth-of-type(2){
            grid-row: 2/3;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="flex">
            <img src="resources/images/image1.png">
            <img src="resources/images/image2.png">
        </div>
    </div>
</body>
</html>

Answer 1

您弄乱了网格并弯曲了。您的<div class="flex">需要两个元素作为行。而且您只有一个（<div class="flex">。尝试删除该div。

body{
  margin: 0;
  padding: 0;
}
.container{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  justify-items: center;
  align-items: center;
}

Answer 2

这对您有用吗？我已将图像显示在列表中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .container{
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 1fr 1fr;
        }
        .flex{
            display: flex;
            justify-content: center;
            align-items: space-evenly;
            list-style: none;
             display: inline;
        }

        .flex img:nth-of-type(2){
            grid-row: 2/3;
        }
        ul {
        white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="container">
            <ul class="flex">
                <li><img src="resources/images/image1.png"></li>
                <li><img src="resources/images/image1.png"></li>
            </ul>
    </div>
</body>
</html>

Answer 3

您的问题是您的.container元素创建了网格格式上下文，这2个img元素未参与，因为它们是ul的子元素类.flex的元素，该元素正在参与.container创建的网格格式上下文，因此，例如，如果要在标记中的ul元素之后添加同级元素，则会遵循您概述的网格规则。

如果您希望使用在img元素上概述的网格模板来格式化.container元素，请更改HTML标记并使img元素 direct 是.container元素的子元素。

就居中而言，您可以使用属性和值对justify-content: center来使网格项中的元素（网格容器的子元素）居中，您可以阅读有关here的信息。

以下是您想要的示例：

.image {
  height: 200px;
  width: 200px;
}
.image:first-child {
  background: firebrick;
}
.image:last-child {
  background: royalblue;
}

/*
========================================
Ignore the above rules
========================================

*/

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  justify-items: center;
}

<div class="container">
  <div class="image"></div>
  <div class="image"></div>
</div>

无法将图片放置到网格的另一行

3 个答案: