Перенастройка содержимого div внутри адаптивной сетки.

Содержание

Вопрос или проблема
Ответ или решение
Реализация выравнивания содержимого div в адаптивной сетке
Общая структура HTML и CSS
CSS-стилизация карточек
Логика применения Flexbox
Вывод

Вопрос или проблема

У меня есть сетка карточек. У карточек есть изображение и текст под ним. Когда ширина браузера уменьшается до 1000px, карточки переходят в сложенный формат и растягиваются на 100% ширины экрана. Изображение должно переместиться на левую сторону текста. Что я не могу сделать правильно, так это выравнивание текста, чтобы он находился справа от изображения, как здесь:

Чтобы это:

#main {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  width: 290px;
  border: 1px solid #f2f0f0;
  background-color: yellow;
}

.card-content {
  background-color: yellow;
  padding: 10px;
}

.card-image {
  height: 290px;
}


@media (max-width: 1000px) {
    .card {
    width: 100%;
  }
  .card-image {
    float: left;
  }
  .card-content {
    float: left;
  }
}

<div id="main">
  <div class="card">
      <div class="card-image">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Uranus_Voyager2_color_calibrated.png/290px-Uranus_Voyager2_color_calibrated.png">
    </div>
    <div class="card-content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida sagittis eleifend. Morbi nec neque cursus, porta nulla nec, lacinia est. Integer vehicula nibh mauris, ut sollicitudin eros efficitur et. Proin eget auctor nisl. Maecenas enim libero, tristique a ornare et, lobortis ut dui. Donec eu mi erat.
    </div>
  </div>
  
  <div class="card">
      <div class="card-image">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Uranus_Voyager2_color_calibrated.png/290px-Uranus_Voyager2_color_calibrated.png">
    </div>
    <div class="card-content">
      Lorem ipsum
    </div>
  </div>
</div>

Не думайте о плавающем, думайте о гибком. Стилейте каждую карточку как гибкий блок, затем в вашем медиазапросе переключите flex-direction с column на row.

.card {
  display: flex;
  flex-direction: column;
}
@media (max-width: 1000px) {
  .card {
    flex-direction: row;
  }
}

#main {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  width: 290px;
  border: 1px solid #f2f0f0;
  background-color: yellow;
  display: flex;
  flex-direction: column;
}

.card-content {
  background-color: yellow;
  padding: 10px;
}

.card-image {
  height: 290px;
}

@media (max-width: 1000px) {
  .card {
    width: 100%;
    flex-direction: row;
  }
}

<div id="main">
  <div class="card">
      <div class="card-image">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Uranus_Voyager2_color_calibrated.png/290px-Uranus_Voyager2_color_calibrated.png">
    </div>
    <div class="card-content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida sagittis eleifend. Morbi nec neque cursus, porta nulla nec, lacinia est. Integer vehicula nibh mauris, ut sollicitudin eros efficitur et. Proin eget auctor nisl. Maecenas enim libero, tristique a ornare et, lobortis ut dui. Donec eu mi erat.
    </div>
  </div>
  
  <div class="card">
      <div class="card-image">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Uranus_Voyager2_color_calibrated.png/290px-Uranus_Voyager2_color_calibrated.png">
    </div>
    <div class="card-content">
      Lorem ipsum
    </div>
  </div>
</div>

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

Ответ или решение

Реализация выравнивания содержимого div в адаптивной сетке

В данной задаче мы говорим о разработке адаптивной разметки карточек, каждая из которых содержит изображение и текст. Когда ширина браузера уменьшается до 1000 пикселей, карточки должны переходить в вертикальный (стacked) формат, где изображение располагается слева от текста. Давайте рассмотрим, как правильно выровнять текст, используя CSS Flexbox.

Общая структура HTML и CSS

Исходный код создан для реализации сетки карточек:

<div id="main">
  <div class="card">
      <div class="card-image">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Uranus_Voyager2_color_calibrated.png/290px-Uranus_Voyager2_color_calibrated.png">
      </div>
      <div class="card-content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida sagittis eleifend.
      </div>
  </div>

  <div class="card">
      <div class="card-image">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Uranus_Voyager2_color_calibrated.png/290px-Uranus_Voyager2_color_calibrated.png">
      </div>
      <div class="card-content">
        Lorem ipsum
      </div>
  </div>
</div>

CSS-стилизация карточек

Используем CSS Flexbox для управления отображением карточек.

#main {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  width: 290px;
  border: 1px solid #f2f0f0;
  background-color: yellow;
  display: flex; /* Используем Flexbox */
  flex-direction: column; /* Вертикальное выравнивание по умолчанию */
}

.card-image {
  height: 290px;
}

.card-content {
  background-color: yellow;
  padding: 10px;
}

@media (max-width: 1000px) {
  .card {
     width: 100%; /* Ширина карточки 100% на узких экранах */
     flex-direction: row; /* Горизонтальное выравнивание при узкой ширине */
  }

  .card-image {
     max-width: 50%; /* Задаем максимальную ширину для изображения */
     flex-shrink: 0; /* Запрещаем изображению сжиматься */
  }

  .card-content {
     flex-grow: 1; /* Текст занимает оставшееся пространство */
     padding: 10px; /* Отступы для текста */
  }
}

Логика применения Flexbox

Начальная настройка: Каждая карточка (.card) изначально настроена как вертикальная (flex-direction: column). Это позволяет изображению быть сверху, а тексту — снизу.
Адаптивное поведение: В медиа-запросе для ширины менее 1000 пикселей flex-direction меняется на row, что позволяет элементам располагаться горизонтально.
Выравнивание изображения и текста: Мы устанавливаем максимальную ширину для изображения, чтобы оно занимало примерно половину доступной области, а текст будет занимать оставшееся пространство благодаря flex-grow: 1.

Вывод

Данная реализация может быть использована для достижения нужного результата в адаптивной разметке карточек. Использование Flexbox вместо float обеспечивает более предсказуемое и гибкое поведение элементов при изменении размеров окна, что особенно важно в современных веб-приложениях.

Пожалуйста, протестируйте вышеприведённый код, чтобы убедиться в корректной работе адаптивного дизайна. Этот подход обеспечит и стабильность, и легкость в изменениях в дальнейшем, что крайне важно в разработке веб-приложений.