Как сделать макет из двух столбцов, в котором элементы начинаются сверху вниз (а не слева направо)?

avatar
karolis2017
9 июля 2019 в 05:40
85
3
-1

По сути, я хочу иметь такой макет: 

"item-1" "item-5"

"item-2" "item-6"

"item-3" "item-7"

"item-4"

Обратите внимание, что элементы идут сверху вниз, а не слева направо.

РЕДАКТИРОВАТЬ: Неизвестно, сколько элементов находится в списке

Источник
Andrew Allen
9 июля 2019 в 06:08
1

Более подробное обсуждение можно найти здесь coderhelper.com/q/50693793/4711754

Ответы (3)

avatar
Sirmais
9 июля 2019 в 06:04
0

Вот ссылка, как показано на картинке, вы можете выбрать, как сетка будет отображаться для вас, переставляя элементы. https://www.w3schools.com/css/css_grid_item.asp

W3school Grid

avatar
DesmondSam
9 июля 2019 в 05:48
-1

Если вы знаете о div и inline-block, попробуйте сделать два деления под основным div и задайте свойство display: inline-block. Таким образом, вы можете легко настроить поля и размеры в соответствии с вашими потребностями. Это должно решить вашу проблему.

avatar
Pons Purushothaman
9 июля 2019 в 05:47
2

Попробуйте макет с несколькими столбцами CSS 

.column {
  -webkit-column-count: 2; 
  -webkit-column-gap: 40px;
  -moz-column-count: 2;
  -moz-column-gap: 40px;
  column-count: 2;
  column-gap: 40px;
}
<div class="column">
  <p>item-1</p>
  <p>item-2</p>
  <p>item-3</p>
  <p>item-4</p>
  <p>item-5</p>
  <p>item-6</p>
  <p>item-7</p>
</div>
karolis2017
9 июля 2019 в 06:18
0

похоже, это работает. Проблема, с которой я столкнулся сейчас, заключается в том, что если у меня есть многострочный текст, половина его обрезается и появляется во 2-м столбце. Как я могу убедиться, что он не порезан? Имеет ли это смысл?