如何在不影响标题内容的情况下将标题div浮动到标题div的右侧？

我想知道如何得到以下结果：如何在不影响标题内容的情况下将标题div浮动到标题div的右侧？

enter image description here

绿色是一个div容器宽700个像素。蓝色是一个标题区域，它在宽度方向上填充绿色容器，其中一些标题文本位于中间。红色需要漂浮在右侧而不会影响标题中文本的流动。

我该如何做到这一点？我尝试过在右侧悬浮红色框，但由于某些原因，它似乎将标题中的文本推向左侧。

编辑 - 为了记录在案，我没有张贴的例子，因为HTML和CSS是不是真的我的专业领域，我挣扎着要回到一个例子，其中文本没有对齐（已经尝试了我读过的六种不同的方法）。

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

来源

2015-02-06 Jon Cage

告诉我们，你已经尝试到目前为止...... – 2015-02-06 20:08:27

我不希望这样的问题（没有努力）有这样的声誉.... – 2015-02-06 20:09:22

'.blue {position：相对}。红色{位置：绝对;正确：0;顶部0;}'这样的事情可能会工作 – 2015-02-06 20:10:08

移动元素成头部，将其设置为position:absolute，并给它一个margin-left:500px;

http://jsfiddle.net/3fgytw0u/2/ < - 那一个是正确的

来源

2015-02-06 21:19:32 SRing

也许这将帮助你：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:10:56 fcastillo

这将游戏的指引拉到页面的角落，而不是绿色容器的角落。 – 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>

来源

2015-02-06 20:15:59 dfsq

这是你想要的。

<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将漂浮在蓝色的右边。

来源

2015-02-06 20:18:34 abbas

我试过，但它有我最初发现的问题 - 标题文本是偏移由红色的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

来源

2015-02-06 20:19:24 ShivamMax

在你的例子中，绿色div似乎是页面的宽度（而不是一个较小的/设置的宽度）？我试过将它设置为100宽度（例如），但似乎不影响输出。 – 2015-02-06 20:51:44

我想这与问题 – ShivamMax 2015-02-06 20:57:51

无关。其实，它是相关的 - 我确实说这是一个固定的（700px）宽度容器在问题中。 – 2015-02-06 21:04:17

如何在不影响标题内容的情况下将标题div浮动到标题div的右侧？

回答

相关问题