我需要以某种方式放置文本的背景

用户名

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

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

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">

桑lac

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

您必须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 QueriesflexboxCSS网格这样,您就可以将图像放置在与其相关的文本之前,反之亦然。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

需要以某种方式将数据列的格式从文本更改为日期

Windows服务使用外部库,我是否需要以某种方式向服务注册?

节点快速会话-机密需要以某种方式唯一吗?

我几乎需要以这种方式设置 JButton 颜色,帮助:

我需要以特定方式排列清单-python

React - 不要以某种方式接受道具(Typescript)

我需要以维度方式计算数组的平均值

我需要以一种非常特定的方式来验证SSN

更新后,我看不到albert启动器,我需要以非GUI方式进行设置

我需要以一种可以从循环中调用构造函数的方式来组织我的类

我需要以角度更改导入URL

我需要以下 XML 的递归函数

如何修改字符串中确定的一组字符?我需要以数字方式修改它们

如何以某种方式定位此文本?

文本渲染以某种方式搞砸了

为什么需要以复杂方式进行计算?

需要以不同的方式格式化对象数组

需要以特定方式从列中创建行

查询需要以其他方式显示数据

需要以编程方式找到Visio外部数据的原始文件

使excel假定我要以只读方式打开我的xlstart文件

我能以某种方式获取.seed()吗?

我可以以某种方式修改 '&' 数组吗?

我有一排,但是我的按钮和文本区域以某种方式彼此对齐,而不是彼此对齐

我可以以某种方式让我的机器人在离线时在特定的文本频道中发送消息吗?

我可以通过某种方式轻松地选择何时在Firefox中打开背景或不打开新标签页吗?

是否可以在不需要时以某种方式关闭或至少关闭我的GeForce RTX 2080 Ti图形卡?

我需要某种实现或DOM吗?

我以某种方式构建了没有无限整数支持的SWI-Prolog。我需要使用需要此支持的谓词