Нужно иметь 3 столбца в 2 строках с содержимым, состоящим только из изображений - PullRequest
Новая
       36

Нужно иметь 3 столбца в 2 строках с содержимым, состоящим только из изображений

0 голосов
/ 06 декабря 2018

Я пытался создать столбец, который имеет 3 сверху и двумя рядами вниз.Пока мне удалось создать только первый ряд, но я не знаю, как разбить его на второй ряд. 

.container {
  display: flex;
  justify-content: space between;
}

.column {
  display: inline block;
  padding: 0.5em;
  display: block;
  width: 33.333%;
}
<div class = "container">
    <div class="column"><img src = "image.jpg" alt = "photo of title and logo" width="600" height="300"></div>
    <div class="column"><img src = "image.jpg" alt = "photo of title and logo "width="600" height="300"></div>
    <div class="column"><img src = "image.jpg" alt = "photo of wortherspoons" width="600" height="300"></div>
    <div class="column"><img src = "image.jpg" alt = "photo of title and logo" width="600" height="300"></div>
    <div class="column"><img src = "image.jpg" alt = "photo of title and logo "width="600" height="300"></div>
    <div class="column"><img src = "image.jpg" alt = "photo of wortherspoons" width="600" height="300"></div>
</div>

Ответы [ 3 ]

0 голосов
/ 06 декабря 2018

У вас это почти получилось, вы просто упускаете пару правил CSS: 

.container {
    display: flex;
    justify-content: space between;
    flex-wrap: wrap; /* added - this tells Flex to wrap onto a new line, if there is no space. */
}

.column {
    display: inline block;
    padding: 0.5em;
    display: block;
    width: 33.333%;
    box-sizing: border-box; /* added - this changes the way padding is applied, so it always stays at 33.33%, regardless of padding */
}

Кроме того, если вы хотите, вы можете добавить этот стиль, чтобы он выглядел немного лучше: 

.column img {
    display: block; /* removes the spacing underneath the image */
    width: 100%; /* sets the width to the parents width */
    height: 100%; /* set the height to the parents height */
    object-fit: cover; /* prevents image from stretching */
}

Демо: https://jsfiddle.net/yx6h4emn/

0 голосов
/ 06 декабря 2018

Пожалуйста, попробуйте этот код 

<!DOCTYPE type>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">


    <title>Album example for Bootstrap</title>


    <style>
    .container
    {
    display: flex;
    flex-wrap: wrap;
    }

    .column
    {
    display: inline block;
    /*padding: 0.5em;*/
    display: block;
    width: calc(33.333% - 0.5em);
    }
    .column img{
      width: 100%;
    }
    </style>

  </head>
  <body>
    <div class = "container">
      <div class="column"><img src = "image.jpg" alt="photo of title and logo" width="auto" height="300"></div>
      <div class="column"><img src = "image.jpg" alt="photo of title and logo" width="auto" height="300"></div>
      <div class="column"><img src = "image.jpg" alt="photo of wortherspoons" width="auto" height="300"></div>
      <div class="column"><img src = "image.jpg" alt="photo of title and logo" width="auto" height="300"></div>
      <div class="column"><img src = "image.jpg" alt="photo of title and logo" width="auto" height="300"></div>
      <div class="column"><img src = "image.jpg" alt="photo of wortherspoons" width="auto" height="300"></div>
  </div>


  </body>
</html>
0 голосов
/ 06 декабря 2018

Не проверено, но если вы используете Flex, оно будет перенесено.Таким образом, вы также хотите разбить столбцы на строки, например: 

<div class = "container">
    <div class="column"><img src = "image.jpg" alt = "photo of title and logo" width="600" height="300"></div>
    <div class="column"><img src = "image.jpg" alt = "photo of title and logo "width="600" height="300"></div>
    <div class="column"><img src = "image.jpg" alt = "photo of wortherspoons" width="600" height="300"></div>
</div>
<div class = "container">
    <div class="column"><img src = "image.jpg" alt = "photo of title and logo" width="600" height="300"></div>
    <div class="column"><img src = "image.jpg" alt = "photo of title and logo "width="600" height="300"></div>
    <div class="column"><img src = "image.jpg" alt = "photo of wortherspoons" width="600" height="300"></div>
</div>
...