Не удается поместить изображение в другой ряд в сетке - PullRequest
Новая
       4

Не удается поместить изображение в другой ряд в сетке

0 голосов
/ 29 сентября 2018

У меня есть два изображения с одинаковыми размерами.У меня есть сетка с одним столбцом и двумя строками.Я хотел бы переместить одно изображение во второй ряд, но независимо от того, что я делаю, оно просто не будет двигаться вниз.Что я могу сделать?Код: 

    <!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>

Ответы [ 3 ]

0 голосов
/ 29 сентября 2018

Будет ли это работать для вас?Я отобразил изображения в списке. 

<!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>
0 голосов
/ 29 сентября 2018

Ваша проблема в том, что ваш элемент .container создает контекст форматирования сетки , в котором элементы 2 img не участвуют, потому что они являются дочерними элементами элемента ul с классом .flex который участвует в контексте форматирования сетки, созданном .container, например, если вы добавите элемент-брат после элемента ul в вашей разметке, он будет следовать правилам сетки, которую вы обрисовали.

Если вы хотите, чтобы элементы img были отформатированы с использованием шаблона сетки, который вы наметили на элементе .container, измените HTML-разметку и сделайте элементы img direct дочерние элементы .container элемента.

С точки зрения центрирования, вы можете центрировать элементы внутри элемента сетки (дочерний элемент контейнера сетки), используя пару свойств и значений justify-content: center, о которой вы можете прочитать здесь .

Ниже приведен пример того, что вы хотите: 

.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>
0 голосов
/ 29 сентября 2018

Вы испортили сетку и прогнулись.Ваш <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;
}
...