如何在不影响标题内容的情况下将标题div浮动到标题div的右侧?
我想知道如何得到以下结果:如何在不影响标题内容的情况下将标题div浮动到标题div的右侧?
绿色是一个div容器宽700个像素。蓝色是一个标题区域,它在宽度方向上填充绿色容器,其中一些标题文本位于中间。红色需要漂浮在右侧而不会影响标题中文本的流动。
我该如何做到这一点?我尝试过在右侧悬浮红色框,但由于某些原因,它似乎将标题中的文本推向左侧。
编辑 - 为了记录在案,我没有张贴的例子,因为HTML和CSS是不是真的我的专业领域,我挣扎着要回到一个例子,其中文本没有对齐(已经尝试了我读过的六种不同的方法)。
这里大概是我试图:http://jsfiddle.net/3fgytw0u/
<!DOCTYPE html>
<head>
<title></title>
<style>
#Container {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
}
#Title {
background-color: red;
text-align: center;
}
#GameGuidelines{
align:right;
width: 200px;
background-color: grey;
}
</style>
</head>
<body>
<div id="Container">
<div id="Title">
<h1>This</h1>
<h2>Is</h2>
<h2>A</h2>
<h2>Long</h2>
<h2>Title Title Title Title</h2>
</div>
<div id="GameGuidelines">
<ul>
<li>Some</li>
<li>Info</li>
<li>Here</li>
</ul>
</div>
<div id="Introduction">
<p>Rest of the page continues here</p>
</div>
</div>
</body>
</html>
移动元素成头部,将其设置为position:absolute
,并给它一个margin-left:500px;
http://jsfiddle.net/3fgytw0u/2/ < - 那一个是正确的
也许这将帮助你:Link
#Container {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
position: relative;
}
#Title {
background-color: red;
text-align: center;
}
#GameGuidelines{
text-align:right;
position: absolute;
right: 0;
top: 0;
width: 200px;
background-color: grey;
}
这将游戏的指引拉到页面的角落,而不是绿色容器的角落。 – 2015-02-06 20:53:36
好吧,证明它[链接](http://jsfiddle.net/2vh6p0gp/)我错了...对不起(对我的英语感到抱歉) – fcastillo 2015-02-06 20:58:22
替代的方法来定位可以使用负margin-left
等于红色区域的宽度:
h2 {
padding: 10px;
background: #EEE;
text-align: center;
overflow: hidden;
}
h2 .right-block {
width: 50px;
height: 50px;
background: coral;
float: right;
margin-left: -50px;
}
<h2>
Some centered text
<div class="right-block"></div>
</h2>
这是你想要的。
<html>
<head></head>
<body>
<div style="border:green 1px solid;height:700px;" >
<div style="border:blue 1px solid;width:100%;height:200px;text-align:center">
Some Title Text
<div style="float:right;border:1px red solid;width:100px;height:100px;margin-right:5px;position:relative;">
Some text
</div>
</div>
</div>
</body>
</html>
红色div将漂浮在蓝色的右边。
我试过,但它有我最初发现的问题 - 标题文本是偏移由红色的div:http://jsfiddle.net/t2e2qz1h/ – 2015-02-06 21:10:22
这可能由内部DIV定位为position: absolute
并把它right: 0px
简单地完成,但因为你需要阻止它不会一开始就被定位成与主显示器,而不是,你把position: relative
到外层div了。另外请确保在写入时先将红色的div放入,然后再放入具有紫色文本的div,或者您可以只添加top: 0px
,这样您就不会再在意了。
然后它应该工作! 这里是一个小提琴:http://jsfiddle.net/xg6rove7/
但要小心这样一个事实,即红色框中的任何文字都可以重叠在紫色的文本,因为我试图在小提琴中向你展示。你可能会使用的填充双方等于框的宽度B更好,或者只是使用普通的老float: right
在你的例子中,绿色div似乎是页面的宽度(而不是一个较小的/设置的宽度)?我试过将它设置为100宽度(例如),但似乎不影响输出。 – 2015-02-06 20:51:44
我想这与问题 – ShivamMax 2015-02-06 20:57:51
无关。其实,它是相关的 - 我确实说这是一个固定的(700px)宽度容器在问题中。 – 2015-02-06 21:04:17
告诉我们,你已经尝试到目前为止...... – 2015-02-06 20:08:27
我不希望这样的问题(没有努力)有这样的声誉.... – 2015-02-06 20:09:22
'.blue {position:相对}。红色{位置:绝对;正确:0;顶部0;}'这样的事情可能会工作 – 2015-02-06 20:10:08