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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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