Question

我对野生动物园和专栏数有疑问。我要添加背景图片，以便可以在图片上添加文字。如果我做对了，Chrome和Firefox会将列框按元素的一半拆分为下一列。因此，如果我在列框中有6个元素，则下一个列将在第三个元素之后开始，与此相关，第四个元素将开始第二列。 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在所有野生动物园中开始新的一列？也许有人甚至知道一种更好的方式来实现列的样式。

致谢

Safari强制中断

0 个答案: