Использование столбцов css для сетки изображений, иногда изображения складываются

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

Я попытался добавить white-space:nowrap, чтобы изображения отображались в одной строке, но он также удаляет column-gap и заставляет изображения выравниваться по левому краю, а не по центру.

Я создал Кодепен, который иллюстрирует проблему. Набор 1 складывается (плохо), Набор 2 находится в столбцах (хорошо).

У кого-нибудь есть идея, почему два набора изображений ведут себя по-разному, и способ решить эту проблему, который также не жертвует зазором и выравниванием?

html css multiple-columns

31.05.2019 02:24

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуйте добавить float:left к img

.img-columns {
  column-gap: 1rem;
  column-count: 2;
  white-space: normal;
}

.img-columns img {
  float: left;
}

<link href = "https://andersons.tyssendesign.com.au/assets/css/site.combined.min.css" rel = "stylesheet" />
<div class = "container mx-auto px-6">
  <div class = "clearfix">
    <h1 class = "px-6 mb-6">Set 1</h1>
    <div class = "px-6 md:float-none md:w-full mb-4  mx-auto  text-center img-columns">
      <img class = "img-content lazyloaded" src = "https://andersons.tyssendesign.com.au/site/assets/files/1387/s-fold-blog-1.480x0.jpg">
      <img class = "img-content  lazyloaded" src = "https://andersons.tyssendesign.com.au/site/assets/files/1387/s-fold-blog-2.480x0.jpg">
    </div>

    <h1 class = "px-6 mb-6">Set 2</h1>
    <div class = "px-6 md:float-none md:w-full mb-4  mx-auto  text-center img-columns">
      <img class = "img-content lazyloaded" src = "https://andersons.tyssendesign.com.au/site/assets/files/1363/bauhaus.480x0.jpg">
      <img class = "img-content lazyloaded" src = "https://andersons.tyssendesign.com.au/site/assets/files/1363/matka.480x0.jpg">
      <img class = "img-content lazyloaded" src = "https://andersons.tyssendesign.com.au/site/assets/files/1363/yokun.480x0.jpg">
    </div>

  </div>
</div>

31.05.2019 02:50

Другие вопросы по теме

Поверните строку таблицы в макете сетки CSS независимо от других строк

Сохранение изображения, нарисованного на холсте

Div с фоновым изображением не отображается

Центрирующие кнопки с Bootstrap 4

Сделайте так, чтобы текст находился в середине изображения при наведении курсора мыши на изображение

PHP Echo внутри абзаца не работает со всеми записями

Настройка ширины столбца Bootstrap

Применить стиль к элементу с пустым следующим братом с помощью Sass

Почему тень SVG обрезается с нижней стороны

Bootstrap: добавьте соединение между div

Использование столбцов css для сетки изображений, иногда изображения складываются

Ответы 1

Другие вопросы по теме

Похожие вопросы