Как сделать так, чтобы изображения с якорными тегами оставались рядом друг с другом

Question

Я создаю страницу исследования для своего социального сайта, и мне нужна помощь. Я пытаюсь сделать так, чтобы изображения и видео оставались рядом друг с другом с помощью якорных тегов <a></a>. Но всякий раз, когда я это делаю, изображения теряют свое border-radius и просто появляются в любом месте в верхней части экрана. Как мне заставить их оставаться рядом друг с другом?

---

 fetch ()) {если ($ userLoggedIn! = $ added_by) {$ parts = explode ('.', $ image); $ extension = array_pop ($ частей); if ($ extension == 'mp4') {эхо "  ";} elseif ($ extension == 'gif' || 'png' || 'jpg' || 'jpeg') {echo"";} else {echo" ";}} else {echo" ";}} $ explore_image-> close (); $ con-> close ();?> 

. исследуйте {display: flex; flex-wrap: wrap;} .explore_image {width: 40%; flex: 1 0 20%; margin: 25px; border-radius: 5px;} 

Answer 1

Посмотрите этот пример, это может быть началом вашего макета. Войдите в полноэкранный режим и измените размер окна, чтобы увидеть эффект.

.explore {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  
  width: 100%;
  max-width: 1024px;
}

.explore-item {
  width: 100%;
  max-width: 300px;
  padding: 20px;
}

.explore-img {
  width: 100%;
  height: auto;
}

<div class="explore">

  <div class="explore-item">
    <a href="#">
      <img class="explore-img" src="https://via.placeholder.com/300" />
    </a>
  </div>
  
  <div class="explore-item">
    <a href="#">
      <img class="explore-img" src="https://via.placeholder.com/300" />
    </a>
  </div>
  
  <div class="explore-item">
    <a href="#">
      <img class="explore-img" src="https://via.placeholder.com/300" />
    </a>
  </div>
  
  <div class="explore-item">
    <a href="#">
      <img class="explore-img" src="https://via.placeholder.com/300" />
    </a>
  </div>
  
  <div class="explore-item">
    <a href="#">
      <img class="explore-img" src="https://via.placeholder.com/300" />
    </a>
  </div>
</div>

Answer 2

это css

a{
display: inline-block;
margin: 0;
padding: 0;
}

inline-block - заставляет элементы располагаться рядом друг с другом
margin & padding - гарантирует, что между элементами нет пробела