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。这样一来，您就可以将图像放置在与其相关的文本之前，反之亦然。

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

1 个答案: