Question

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

enter image description here

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

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

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

Answer 1

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

http://jsfiddle.net/3fgytw0u/2/＆lt; - 那是正确的

Answer 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;
}

Answer 3

定位的替代方法可以使用等于红色区域宽度的负margin-left：

＆＃13;

h2 {
    padding: 10px;
    background: #EEE;
    text-align: center;
    overflow: hidden;
}
h2 .right-block {
    width: 50px;
    height: 50px;
    background: coral;
    float: right;
    margin-left: -50px;
}

＆＃13;

<h2>
    Some centered text
    <div class="right-block"></div>
</h2>

＆＃13;

Answer 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将在蓝色内侧浮动。

Answer 5

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

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

但请注意，红色框中的任何文字都可以与紫色文本重叠，因为我试图向你展示小提琴。你可以更好地使用两边的填充等于框的宽度，或者只使用普通的float: right

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

5 个答案: