0

подскажите можно ли лишь с одного css сделать следующее:

есть много записей вида

<div>текст</div>

требуется вывести их в несколько столбцов, причем

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

  2. записи располагаются сверху вниз слева направо (а не слева направо сверху вниз)

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

  1. чтобы расположить записи по всей ширине блока в котором содержатся указанные записи надо использовать

     justify-content: space-between;
    

но в этом случае, если столбцов 3, а записей 5, то 2 последние записи будут как бы выходить из столбцов

.block {
    width:          200px;
  
    display:        flex;
    flex-flow:      row wrap;
    justify-content: space-between;
}

.block div {
    width:            calc(100% / 3 - 10px);
    margin:           5px;
    
    background:       orange;
}
<div class = 'block'>
<div>текст 1</div>
<div>текст 2</div>
<div>текст 3</div>
<div>текст 4</div>
<div>текст 5</div>
</div>

  1. если использовать свойство column вместо row для flex-flow, то без ограничения высоты блока несколько рядов не получится

    .block {
        width:          200px;
      
        display:        flex;
        flex-flow:      column wrap;
        justify-content: space-between;
    }

    .block div {
        width:            calc(100% / 3 - 10px);
        margin:           5px;
        
        background:       orange;
    }
    <div class = 'block'>
    <div>текст 1</div>
    <div>текст 2</div>
    <div>текст 3</div>
    <div>текст 4</div>
    <div>текст 5</div>
    </div>

Подскажите, есть ли способ как-то обойти эти ограничения?

1 ответ 1

0

Вариант с columns не подходит?

for(let i = 0; i < 10; i++)
  document.querySelector('#column').innerHTML += '<div>Текст '+(i+1)+'</div>';
#column {
  display: inline-block;
  max-width: 100%;
  columns: 3 auto;
}

#column > div {
  display: block;
  background: orange;
  margin-bottom: 1em;
}
<div id="column"></div>

2
  • хотелось бы чтобы было такое заполнение (сверху вниз) [1 2 3 4] [5 6 7] [8 9 10], т.е. чтобы заполнение шло сверху вниз, но так чтобы максимально заполнялись строки сверху вниз. В вашем примере максимально в первую очередь заполняются столбцы, а не строки
    – Zhihar
    29 янв 2021 в 16:38
  • Хм.. Думаю это уже к кастомным решениям будет относится, писать скрипт под это..
    – De.Minov
    29 янв 2021 в 16:46

Ваш ответ

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

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