css: при использовании двух div блоков в контейнере с column-count = 2 блоки выводятся друг за другом вертикально, а не горизонтально
При использовании двух 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>В чём может быть дело и как это исправить?
Источник: Stack Overflow на русском