1

Как циклом вывести список слов в блоке DIV, чтобы он формировался по вертикали сверху-вниз, а если не помещался в блок, перемещался вправо создавая новую колонку заполняя ее сверху-вниз, и так далее.

введите сюда описание изображения

2
  • возможно, если у вас flex, то поменять направление. 4 мар 2021 в 10:10
  • Ещё ответ зависит от того, что у вас есть в коде и что вы ожидаете от ответа (правки вашего кода или другой подход) 4 мар 2021 в 10:10

2 ответа 2

2

Вот самый оптимальный вариант такого позиционирования элементов:

div {
  display: inline-flex;
  flex-flow: column wrap;
  align-items: flex-start;
  align-content: flex-start;
  height: 100px;
}

span {
  margin: 5px;
  flex: 0 1 auto;
  align-self: flex-start;
}
<div>
  <span>word 1</span>
  <span>word 2</span>
  <span>word 3</span>
  <span>word 4</span>
  <span>word 5</span>
  <span>word 6</span>
  <span>word 7</span>
  <span>word 8</span>
  <span>word 9</span>
</div>

upd. = комментарий: Допустим мне нужно третьему и восьмому элементу задать свой цвет, как это реализовать?

div {
  display: inline-flex;
  flex-flow: column wrap;
  align-items: flex-start;
  align-content: flex-start;
  height: 100px;
}

span {
  margin: 5px;
  flex: 0 1 auto;
  align-self: flex-start;
}

div>span:nth-child(3), div>span:nth-child(8) {color:red;}
<div>
  <span>word 1</span>
  <span>word 2</span>
  <span>word 3</span>
  <span>word 4</span>
  <span>word 5</span>
  <span>word 6</span>
  <span>word 7</span>
  <span>word 8</span>
  <span>word 9</span>
</div>

2
  • Огромное Вам спасибо! Если можно, еще подскажите пожалуйста. Допустим мне нужно третьему и восьмому элементу задать свой цвет, как это реализовать? 4 мар 2021 в 12:31
  • То, что нужно) Благодарю! 4 мар 2021 в 13:32
0

.container {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-auto-flow: column;
  width: 12rem;
}

.container > div {
  width: 33.33%;
}
<div class="container">
  <div>word 1</div>
  <div>word 2</div>
  <div>word 3</div>
  <div>word 4</div>
  <div>word 5</div>
  <div>word 6</div>
  <div>word 7</div>
  <div>word 8</div>
  <div>word 9</div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.