Question

我正在尝试在列数块中的图像上方添加文本。目标是在div框中将几个图像设置为column-count：2，并在div框中的图像上放置一些文本。我正在使用列数来使彼此之间具有不同高度的图像很好地相互覆盖，而它们之间没有丝毫间隔。

首先，我只是将div中的图像和文本添加到column-count div中。我必须了解，如果我尝试在图像上添加相对位置和绝对位置的文本，以使文本与列div对齐，而不是与图像的直接父级对齐。今天，我想到将图像放入背景中。接缝是正确的方法，但是图像的一部分在第一列中，另一部分在第二列中。

到目前为止，这是我的代码：

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;
}
.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>

如您所见，第四张图像被分割了。显然，这是由列数引起的，但是有一种方法可以在不分割背景图像的情况下实现这一目的。还是有更整洁的方式？

谢谢！

Answer 1

您要将for index in range(0,len(media)): for index2 in range(0,len(df_mentions)): if str(media['Link'][index])in str(df_mentions['Mentions'][index2]): df_mentions['Publication'][index2]=media['Publication'][index] df_mentions['Country'][index2]=media['Country'][index] df_mentions['Foundation'][index2]=media['Foundation'][index] df_mentions['Is_in_media'][index2]='Yes' else: df_mentions['Is_in_media'][index2]='No' df_mentions添加到break-inside: avoid-column;类中：

.cc-block

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;
  break-inside:        avoid-column;
  -webkit-column-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;
}

列数块中图像上的文本覆盖

1 个答案: