将一个div定位到其包含div的右侧

Question

将一个div定位到其包含div的右侧

8

我知道这个问题听起来很基础，但我就是无法解决它。我有一个div容器，想把一个子div定位到右侧。我试过使用相对定位来定位容器div，然后使用绝对定位来定位子div，但父div会失去宽度。 enter image description here

请看上面的图片，我需要div1定位在divContainer的右侧。我在divContainer中还有其他嵌套的div，我只需要将div1定位在右侧。

div#divContainer{
    margin-left:auto;
    margin-right:auto;
    top: 0px;
    width:1000px;
    background:#666;
    position:relative;

}
div#div1{
    height:45px;width:200px;
    background:yellow;
    position:absolute;

}

HTML 代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title></title>

    </head>
    <body>
        <div id="divContainer">
            <div id="div1"></div> 
        </div>
    </body>
</html>

- manraj82

2个回答

2

#divContainer不应该根据您的描述而失去其宽度，但是如果所有子div都被绝对定位，则会失去其高度。

定位#div1的最佳方法取决于您是否希望它影响其他子div的位置。如果是这样，请将float: right;应用于#div1。如果不是，则position: absolute;是正确的选择；您可能希望在#divContainer右侧添加填充，以使#div1不会覆盖其他子div。

这符合您的要求吗？

http://jsfiddle.net/pauldwaite/J9vQF/

- Paul D. Waite

谢谢你的回答，我已经编辑了CSS代码。你能否请检查一下CSS代码或在你的浏览器中运行它？父级div正在失去它的宽度。 - manraj82

@manraj82：好的；你有编辑后版本的链接吗？我对JSFiddle还有点陌生；我想你可能需要在编辑后点击“保存”或其他什么按钮。 - Paul D. Waite

谢谢，我看了你的代码。为什么当我删除div2、div3和div4时，divContainer会消失（它失去了宽度）？抱歉，我只是想弄清楚这是怎么工作的。 - manraj82

@manraj82：啊，没错——它不会失去宽度，而是失去了高度。效果是一样的：它消失了。<div>从其内容中获取其高度；如果没有内容，则没有高度。当元素被绝对定位时，它们将从文档流中移除，并且不再被视为其父元素的内容，以计算高度。因此，您最好采用Matthew的建议，改用float。 - Paul D. Waite

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matthew Lehner · Accepted Answer

假设#div1是一个导航类型的div，你只需要将它浮动到你想要的一侧。

div#div1{
  height:45px;width:200px;
  background:yellow;
  float:right;
}

这将在您的文档中绝对定位。如果您遇到困难，可能需要花些时间阅读一些关于CSS定位的好资源。 A List Apart 为CSS提供了很棒的资源。