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

【问题标题】：How do I float a div to the right of a title div without affecting the content of the title?如何在不影响标题内容的情况下将 div 浮动到标题 div 的右侧？
【发布时间】：2015-02-06 20:07:13
【问题描述】：

我想知道如何得到以下结果：

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

我如何实现这一目标？我试过浮动右侧的红色框，但似乎出于某种原因将标题中的文本推到了左侧。

编辑 - 作为记录，我没有发布示例，因为 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>

【问题讨论】：

向我们展示你到目前为止已经尝试过......
我不希望这样的问题（不费吹灰之力）有这样的声誉......
.blue {position: relative} .red {position: absolute; right: 0; top 0;} 这样的东西可能会起作用
@DaveGoten 不需要使用位置
一个 jsfiddle 链接，或者在某个地方修补......

标签： html css css-float

【解决方案1】：

将元素向上移动到标题中，将其设置为position:absolute 并给它一个margin-left:500px;

http://jsfiddle.net/3fgytw0u/2/

【讨论】：

【解决方案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;
}

【讨论】：

这会将游戏指南拉到页面的角落而不是绿色容器的角落。
好吧，证明它link我错了......对不起（对不起我的英语）

【解决方案3】：

定位的替代方法可以使用负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>

【讨论】：

【解决方案4】：

这就是你想要的。

  <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 偏移：jsfiddle.net/t2e2qz1h

【解决方案5】：

这可以简单地通过将内部 div 定位为 position: absolute 并将其放入 right: 0px 来完成，但是因为您需要防止它不开始与主显示器一起定位，所以您将 position: relative 放入外部 div 也是。还要确保在编写时先放置红色 div，然后放置有紫色文本的 div，或者您可以添加 top: 0px 这样您就不再关心了。

那么它应该工作！这是一个小提琴：http://jsfiddle.net/xg6rove7/

但请注意，红色框中的任何文本都可能与紫色文本中的文本重叠，正如我试图在小提琴中向您展示的那样。你可能会更好地使用两边的填充等于盒子的宽度，或者只使用你普通的旧float: right

【讨论】：

在您的示例中，绿色 div 似乎是页面的宽度（而不是更小的/设置的宽度）？我尝试将其设置为 100 宽度（例如），但这似乎不会影响输出。
我猜这与问题无关
实际上，它是相关的 - 我确实在问题中说它是一个固定（700px）宽度的容器。
好吧，我把红色的 div 放在了蓝色的里面，这就是为什么我认为绿色的 div 有多大并不重要。但是，如果绿色 div 太小，如您所说，例如 100px，那么当它小于红色 div 的宽度时，这可能会成为问题。
我的意思是我想限制绿色框的大小及其内容。即使我将页面大小调整为 > 1000px，您示例中的绿色框也会跟随页面大小。