1

При использовании двух div блоков в контейнере с column-count = 2 блоки выводятся друг за другом вертикально, а не горизонтально

.blocks {
    width           : 100%;  
    column-count    : 2;
    column-gap      : 0px;

    margin-top      : 15px;

    background-color: red;
}

.blocks > div {
    display         : inline-block;

    height          : fit-content;
    width           : calc(100% - 2 * 1px - 10px);
    
    margin-bottom   : 10px;  
    padding         : 10px 0 10px 10px;
    
    border          : 1px solid black;    
    background-color: lime;
}
<div class='blocks'>
  <div>Block #1</div>
  <div>Block #2</div>
</div>

Если же выводить 3 блока - то всё корректно более-менее, хотя всё равно второй блок располагается под первым, а не справа от первого

.blocks {
    width           : 100%;  
    column-count    : 2;
    column-gap      : 0px;

    margin-top      : 15px;

    background-color: red;
}

.blocks > div {
    display         : inline-block;

    height          : fit-content;
    width           : calc(100% - 2 * 1px - 10px);
    
    margin-bottom   : 10px;  
    padding         : 10px 0 10px 10px;
    
    border          : 1px solid black;    
    background-color: lime;
}
<div class='blocks'>
  <div>Block #1</div>
  <div>Block #2</div>
  <div>Block #3</div>  
</div>

В чём может быть дело и как это исправить?

11
  • 2
    А почему бы просто не использовать display: grid? Вместо width: calc(100% - 2 * 1px - 10px) можно было бы просто width: 100% и box-sizing: border-box 11 мая 2023 в 11:06
  • 1
    Потому что колонки так работают. Во вторую колонку элементы будут перемещаться только после заполнения первой. Т.к. у вас .blocks не ограничен по высоте, то заполнятся они будут в следующем порядке: во второй колонке количество будет меньше или равно. Грубо говоря, общее количество делится на 2, число элементов с округлением вверх идёт в первую, остаток во вторую. Попробуйте добавить больше блоков. В случае с двумя блоками оба идут в первую колонку. Если необходимо вывести два блока в две колонки, ограничьте .blocks по высоте height: 50px;.
    – DiMithras
    11 мая 2023 в 11:23
  • Ну и надо понимать, что колонки созданы для текста, а не распределения div блоков. Так с текстом замечательно будет работать column-fill: balance;, но на div никак не отразится. Чтобы тасовать div, как подсказал @OliverPatterson используйте display: grid.
    – DiMithras
    11 мая 2023 в 11:28
  • По крайней мере в mozilla вижу только использование с параграфами, но могу быть дико не прав. Использовать div довольно интересный подход, здорово, что он работает, но работает не так как вы хотите )
    – DiMithras
    11 мая 2023 в 11:34
  • 1
    Скорее всего автор хочет что-то типо masonry. 11 мая 2023 в 11:59

0

Ваш ответ

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

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