Блог

Я создал столбчатый вид, используя свойство CSS column-count . При установке column-count: 3 значения содержимое моей страницы отображается в виде 3 отдельных столбцов без дополнительного вертикального пробела — элементы непрерывны по вертикали, нет дополнительного вертикального пробела или горизонтального правила, которому придерживаются элементы в одной строке. (См. Изображение)

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

 1 | 4 | 7
2 | 5 | 8
3 | 6 | 9
  

Я бы хотел, чтобы это было расположено горизонтально, но сохраняло тот же внешний вид.

 1 | 2 | 3
4 | 5 | 6
7 | 8 | 9
  

Один из способов, который я пробовал, состоял в том, чтобы не использовать column-count и вместо этого дать каждому элементу фиксированную ширину, но все элементы будут придерживаться горизонтального правила, оставляя огромный вертикальный зазор под элементами, если один из элементов в этой строке длиннее остальных.

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

Есть ли способ сделать это, используя только HTML и CSS?

Вы должны обязательно проверить FlexBox, который включен в css по умолчанию. Проблема должна быть устранена, если вы помещаете все элементы в div, предоставляя ему:

 display: flex;
flex-direction: row;
flex-wrap: wrap;
  

и просто настройка размера и т. Д. по вашему желанию.

Приветствия