Принудительный прорыв в колонне для сафари - PullRequest
0 голосов
/ 10 июля 2019

У меня проблема с сафари и количеством столбцов. Я добавляю фоновые изображения, чтобы я мог добавить текст поверх изображений. Если я правильно понял, 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 начать новый столбец во всех сафари? Может быть, кто-то даже знает лучший способ добиться стиля колонки.

Привет

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...