我需要以某种方式为文本定位背景

Question

所以我现在对我的代码有两个问题。

• 一个是顶部文本左侧文本框不随文本移动的背景，而是文本溢出背景。
• 我的另一个问题是右下方文本框上的填充。我希望在中间图片和顶部文本框之间具有相同的功能。当我尝试在右下方的文本框中添加填充时，它只是在文本而不是白色背景上添加填充。

body {
  background-image: url("wall.jpg");
  overflow-x: hidden;
}
.right {
  float: right;
  right: 0px;
  width: 50%;
  height:340px;
}
.campaign{
  width: 100%;
  height: 600px;
  padding-top: 40px;
  padding-bottom: 40px;
}
.campaignblurb{
  float: left;
  width: 100%;
  background-color:white; 
  text-align:left;
  vertical-align: middle; 
  padding:20px;
  opacity: 0.6;
  font-family: "Times New Roman", Times, serif;
  font-style: normal;
  font-weight: normal;
  font-size: 42px;
  line-height: normal;
  color: #000000;
}
.p2coop{
float:left;
width: 50%;
font-family: "Times New Roman", Times, serif;
font-style: normal;
font-weight: normal;
font-size: 36px;
line-height: normal;
color: #000000;
background-color:white;
 text-align:left;
 vertical-align: left; 
 opacity: 0.6;
 height: 340px;
}
.editorblurb{
	width: 50%;
	float:right;
	height: 350px;
	font-family: "Times New Roman", Times, serif;
	font-style: normal;
    font-weight: normal;
    font-size: 35px;
    line-height: normal;
    color: #000000;
	right: 100px;
	background-color:white; 
	background-origin: padding-box;
  text-align:left;
  vertical-align: middle; 
  padding:20px;
  opacity: 0.6;
}
.editor{
  width: 50%;
  height:350px;
  float:left;
}

<div class="p2coop">The game’s two-player cooperative mode features its own entirely
 separate campaign with a unique story, test chambers, and two new player characters ATLAS and P-body, 
 referred to as Blue and Orange by GLaDOS, a pair of bipedal Personality Construct
 based androids. This new mode forces players to reconsider everything they thought they knew about portals.
 Success will require them to not just act cooperatively, but to think cooperatively.</div>
 <img src="portal_atlas_pbody.jpg" class="right">
 <img src="portal2campaign.jpg" class="campaign">
 <div class="campaignblurb">The single-player portion of Portal 2 introduces a cast of dynamic 
 new characters, a host of fresh puzzle elements, and a much larger set of devious test chambers.
 Players will explore never-before-seen areas of the Aperture Science Labs and be reunited with GLaDOS,
 the occasionally murderous computer companion who guided them through the original game.</div>
 <div class="editorblurb">
The Puzzle Creator (also known as Puzzle Maker or Editor) is a part of the Perpetual Testing 
Initiative in Portal 2, allowing the creation of single-player
and Co-op test chambers within a simple in-game editor.
</div>
 <img src="leveleditor.jpg" class="editor">

Answer 1

文本溢出背景的原因是因为您设置了高度，但没有定义溢出或任何内容。

你有一个选择是在div上设置overflow: scroll，这样用户就可以滚动阅读内容并且不会改变布局。

否则，您可以删除div上的设置高度，并允许文本填充所需的空间。

要解决与底部文本div和图像间隔的问题，只需在底部div上设置margin-bottom: Xpx即可。这将在它和它下面的元素之间添加空白，填充为元素内部增加了空间，导致背景也移动。

body {
  background-image: url("wall.jpg");
  overflow-x: hidden;
}

.right {
  float: right;
  right: 0px;
  width: 50%;
  height: 340px;
}

.campaign {
  width: 100%;
  height: 600px;
  padding-top: 40px;
  padding-bottom: 40px;
}

.campaignblurb {
  float: left;
  width: 100%;
  background-color: red;
  text-align: left;
  vertical-align: middle;
  padding: 20px;
  opacity: 0.6;
  font-family: "Times New Roman", Times, serif;
  font-style: normal;
  font-weight: normal;
  font-size: 42px;
  line-height: normal;
  color: #000000;
}

.p2coop {
  float: left;
  width: 50%;
  font-family: "Times New Roman", Times, serif;
  font-style: normal;
  font-weight: normal;
  font-size: 36px;
  line-height: normal;
  color: #000000;
  background-color: grey;
  background-size: cover;
  text-align: left;
  vertical-align: left;
  opacity: 0.6;
  height: 340px;
  overflow: scroll;
}

.editorblurb {
  width: 50%;
  float: right;
  /* height: 350px; */
  font-family: "Times New Roman", Times, serif;
  font-style: normal;
  font-weight: normal;
  font-size: 35px;
  line-height: normal;
  color: #000000;
  right: 100px;
  background-color: grey;
  background-origin: padding-box;
  text-align: left;
  vertical-align: middle;
  padding: 20px;
  opacity: 0.6;
  margin-bottom: 20px;
}

.editor {
  width: 50%;
  height: 350px;
  float: left;
}

<div class="p2coop">
  Scrolling example with set height <br /><br /> The game’s two-player cooperative mode features its own entirely separate campaign with a unique story, test chambers, and two new player characters ATLAS and P-body, referred to as Blue and Orange by GLaDOS,
  a pair of bipedal Personality Construct based androids. This new mode forces players to reconsider everything they thought they knew about portals. Success will require them to not just act cooperatively, but to think cooperatively.
</div>
<img src="portal_atlas_pbody.jpg" class="right" />
<img src="portal2campaign.jpg" class="campaign" />
<div class="campaignblurb">
  The single-player portion of Portal 2 introduces a cast of dynamic new characters, a host of fresh puzzle elements, and a much larger set of devious test chambers. Players will explore never-before-seen areas of the Aperture Science Labs and be reunited
  with GLaDOS, the occasionally murderous computer companion who guided them through the original game.
</div>
<div class="editorblurb">
  Removing the height example <br /><br /> The Puzzle Creator (also known as Puzzle Maker or Editor) is a part of the Perpetual Testing Initiative in Portal 2, allowing the creation of single-player and Co-op test chambers within a simple in-game editor.
</div>
<img src="leveleditor.jpg" class="editor" />

我不建议在移动屏幕上使用此布局，因此您正在考虑使其适合不同的屏幕尺寸，然后查看Media Queries，flexbox或CSS grid。这将允许您在与其相关的文本之前定位图像，反之亦然。