所以我的代码现在有两个问题。
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">
文本溢出背景的原因是因为您设置了高度,但没有定义溢出或任何其他内容。
您必须overflow: scroll
在div上进行设置,以便用户可以滚动以读取内容,而这不会改变布局。
否则,您可以删除div上的设置高度,并允许文本填充所需的空间。
要解决间距底部文本div和图像所遇到的问题,只需margin-bottom: Xpx
在底部div上进行设置即可。这将在它和它下面的元素之间添加空白,填充会在元素内部添加空间,从而导致背景也移动。
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网格。这样,您就可以将图像放置在与其相关的文本之前,反之亦然。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句