Question

我知道这个问题听起来很基本，但我无法修复它。我有一个div容器，我试图将一个子div放在右边。我试着用相对定位容器div然后使用absolute定位子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 CODE

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

Answer 1

假设＃div1是一个导航类型div，你应该将它漂浮到你想要的那一面。

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

这将绝对定位在您的文档中。如果你遇到这个问题，你可能需要花些时间阅读一些关于CSS定位的好资源。 A List Apart拥有丰富的CSS资源。

Answer 2

#divContainer不应该根据你的描述丢失它的宽度，但是如果它的所有子div都是绝对定位的话，它将失去它的高度。

定位#div1的最佳方法取决于您是否希望它影响其他chid div的位置。如果是，请将float: right;应用于#div1。如果没有，position: absolute;是要走的路;您可能希望在#divContainer的右侧添加填充，以便#div1不会位于其他子div之上。

这是你的目标吗？

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

将div定位在其包含div的右侧

2 个答案: