У меня проблема с сафари и количеством столбцов. Я добавляю фоновые изображения, чтобы я мог добавить текст поверх изображений. Если я правильно понял, Chrome и Firefox делят поле столбца на следующий столбец пополам. Таким образом, если у меня есть 6 элементов в поле столбца, следующий столбец начнется после 3-го элемента, при этом 4-й элемент начнет второй столбец.
Safari, кажется, рассчитывает это по-другому. Есть ли способ форсировать следующий столбец?
body{
margin: 0;
padding: 0;
}
.cc{
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
}
.cc-block{
background-repeat: no-repeat;
background-position: center;
background-size: cover;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
.block_1{
background-image: url(https://via.placeholder.com/650x450/ff0000);
width: 100%;
height: 450px;
}
.block_2{
background-image: url(https://via.placeholder.com/650x250/ffff00);
width: 100%;
height: 250px;
}
.block_3{
background-image: url(https://via.placeholder.com/650x300/80ff00);
width: 100%;
height: 300px;
}
.block_4{
background-image: url(https://via.placeholder.com/650x450/00ffff);
width: 100%;
height: 450px;
}
.block_5{
background-image: url(https://via.placeholder.com/650x550/4000ff);
width: 100%;
height: 550px;
}
.block_6{
background-image: url(https://via.placeholder.com/650x150/ff00ff);
width: 100%;
height: 150px;
}
<div class="cc">
<div class="cc-block block_1">
<div>
<h2>Some Heading</h2>
<p>Some Paragraph</p>
</div>
</div>
<div class="cc-block block_2">
<div>
<h2>Some Heading</h2>
<p>Some Paragraph</p>
</div>
</div>
<div class="cc-block block_3">
<div>
<h2>Some Heading</h2>
<p>Some Paragraph</p>
</div>
</div>
<div class="cc-block block_4">
<div>
<h2>Some Heading</h2>
<p>Some Paragraph</p>
</div>
</div>
<div class="cc-block block_5">
<div>
<h2>Some Heading</h2>
<p>Some Paragraph</p>
</div>
</div>
<div class="cc-block block_6">
<div>
<h2>Some Heading</h2>
<p>Some Paragraph</p>
</div>
</div>
</div>
Я пытался добавить page-break-before: always
, но ничего не происходит.
Для краткости: есть ли способ заставить block_4 начать новый столбец во всех сафари?
Может быть, кто-то даже знает лучший способ добиться стиля колонки.
Привет