Блог

Главная - Вопросы по программированию - Мне нужно создать галерею изображений из 4 столбцов и 3 строк, где все эти изображения имеют одинаковый размер

Мне нужно создать галерею изображений из 4 столбцов и 3 строк, где все эти изображения имеют одинаковый размер

#html

#HTML

Вопрос:

Итак, я делал это раньше, но я не могу вспомнить, как я это делал с помощью CSS. HTML, который у меня здесь, остался неизменным, но с css у меня возникли проблемы. В принципе, мне нужна сетка из 4 столбцов и 3 строк из этих изображений, и все изображения должны быть одинакового размера, и эта сетка должна быть центрирована. Я должен сделать это, отредактировав CSS, но я понятия не имею, почему ничего, что я делаю, не работает.

HTML:

 </div>
<div class="row"> 
  <div class="column">
    <div class="thumbnail">
        <img src="CS1.jpg" alt="Counter Strike: Global Offensive Screenshot">
        <img src="CS2.jpg" alt="Counter Strike: Global Offensive Screenshot">
        <img src="CS3.jpg" alt="Counter Strike: Global Offensive Screenshot">
      </div>
  </div>
  <div class="column">
      <div class="thumbnail">
        <img src="CS4.jpg" alt="Counter Strike: Global Offensive Screenshot">
        <img src="CS5.jpg" alt="Counter Strike: Global Offensive Screenshot">
        <img src="CS6.jpg" alt="Counter Strike: Global Offensive Screenshot">
      </div> 
  </div>
  <div class="column">
      <div class="thumbnail">
        <img src="CS7.jpg" alt="Counter Strike: Global Offensive Screenshot">
        <img src="CS8.jpg" alt="Counter Strike: Global Offensive Screenshot">
        <img src="CS9.jpg" alt="Counter Strike: Global Offensive Screenshot">
        </div>
  </div>
  <div class="column">
      <div class="thumbnail">
        <img src="CS10.jpg" alt="Counter Strike: Global Offensive Screenshot">
        <img src="CS11.jpg" alt="Counter Strike: Global Offensive Screenshot">
        <img src="CS12.jpg" alt="Counter Strike: Global Offensive Screenshot">
      </div>
  </div>
</div>

CSS:

 .row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.column {
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  display: block;
}

Ответ №1:

 .parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1 0 21%; 
  margin: 5px;
  height: 100px;
  background-color: blue;
}  
 <div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>  

 Try this code

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1 0 21%; 
  margin: 5px;
  height: 100px;
  background-color: blue;
}
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>