КАК - Выровнять изображения бок о бок

Question

I am following this tutorial on w3schools . Я создаю социальный сайт, и я хочу показать пользователям страницу исследования, и я хочу, чтобы изображения располагались рядом, может быть, 3 или 4 картинки в ряд, а затем разрывались, а затем показывались еще 3 или 4. Сейчас он полностью отключен. .

As you can see, it is on top of each other and it is all on the right side of the page. What am I missing ? I want it to show exactly how it looks on the example.

 fetch ()) {if ($ userLoggedIn! = $ added_by) {if (! empty ($ image)) {echo ' '; эхо "  $ added_by $ лайков 



 ";}}} $ explore_image-> close (); $ con- > close ();?>  * {box-sizing: border-box;} .row {display: flex;} / * Создаем три равных столбца, которые располагаются рядом друг с другом * / .explore_column {flex: 100.33% ; padding: 5px;} @media screen и (max-width: 500px) {.explore_column {width: 100%;}} / * Три контейнера изображений (используйте 25% для четырех и 50% для двух, et c ) * / .explore_column {float: left; width: 33.33%; padding: 5px;} / * Очистить поплавки после контейнеров изображений * / .row :: after {content: ""; clear: both; display: table;} 

Answer 1

Вы можете попробовать реализовать стили, как показано ниже:

div {
  display: flex;
  flex-wrap: wrap;
}
img {
  flex: 1 0 20%;
  width: 20%;
  margin: 5px;
}

<div>
  <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg"/>
  <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg"/>
  <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg"/>
  <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg"/>
  <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg"/>
  <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg"/>
</div>

Вы можете настроить% в соответствии с вашими потребностями.

Answer 2

Как сказал Якуб, оставьте дисплей гибким, но также добавьте

flex-direction: row;

, что может помочь