CSS для проблем с макетом изображения

Question

Я изучаю адаптивный CSS, так что это все довольно ново для меня.Однако, почему изображения во втором ряду не обнимают верхние изображения?

В идеале мне просто нужно 4 изображения в строке, но если на меньшем экране или телефоне и т. Д. Это будет динамически уменьшать размер изображения и уменьшать количество изображений в строке.Не можете заставить это работать?Любая помощь приветствуется!Весь CSS относительно изображений находится на этой статической странице.

div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 10px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: right;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="https://memorybox.pt">
      <img src="images/memory-box.png" alt="Algarve Wedding Photography" width="600" height="400">
    </a>
    <div class="desc">Algarve Wedding Planners</div>
  </div>
</div>

<div class="responsive">
<div class="gallery">
  <a target="_blank" href="https://algarvedjhire.com/">
    <img src="images/algarve_dj_hire.jpg" alt="Algarve Wedding Photography" width="600" height="400">
  </a>
  <div class="desc">Algarve DJ & Music</div>
</div>

Answer 1

Используйте height и вместо float right используйте float left в вашем .responsive классе.Смотрите пример ниже.Я использую высоту 290px, которую вы можете использовать в зависимости от ваших потребностей.

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
  height: 290px;
} 

Также вы можете использовать margin-bottom в вашей отзывчивой точке разрыва, чтобы она выглядела хорошо.Смотрите пример ниже.

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0 30px 0; 
  }
}