Html 将div定位到其包含div的右侧_Html_Css

Html 将div定位到其包含div的右侧

html css

Html 将div定位到其包含div的右侧,html,css,Html,Css,我知道这个问题听起来很基本，但我就是无法解决。我有一个div容器，我正在尝试将a子div定位到右侧。我尝试用relative定位容器div，然后用absolute定位子div，但是父div失去了宽度请看上面的图片，我需要div1将其自身定位在divContainer的右侧。我在divContainer中还有其他嵌套的div，我只需要将div1放在右边 div#divContainer{ margin-left:auto; margin-right:auto; top:

我知道这个问题听起来很基本，但我就是无法解决。我有一个div容器，我正在尝试将a子div定位到右侧。我尝试用relative定位容器div，然后用absolute定位子div，但是父div失去了宽度

请看上面的图片，我需要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>

#divContainer

根据您的描述，不应丢失其宽度，但如果其所有子div都完全定位，它将丢失其高度

定位

#div1

的最佳方法取决于您是否希望它影响其他chid div的位置。如果是，则应用

float:right至#div1
。如果不是，位置：绝对是要走的路；您可能需要在#divContainer
的右侧添加填充，以便#div1
不会位于其他子div的顶部
这就是你的目标吗


假设#div1是导航型div，您应该将其浮动到您想要的一侧
div#div1{
  height:45px;width:200px;
  background:yellow;
  float:right;
}

这将使其绝对位于您的文档中。如果您在这方面遇到困难，您可能需要花一些时间阅读一些关于CSS定位的好资源。有丰富的CSS资源。
谢谢你的回答，我已经编辑了CSS代码。请检查CSS代码或在你的浏览器中运行它好吗？父div正在丢失其宽度。@manraj82:当然；你有编辑版本的链接吗？我对JSFIDLE有点陌生；我想编辑后您可能需要点击“保存”或其他什么。谢谢，我查看了您的代码。为什么当我删除div2、div3和div4时，divContainer消失了[它失去了宽度]。很抱歉，只是想了解它是如何工作的。@manraj82:啊，当然-它没有失去宽度，它失去了高度。效果是一样的：它消失了<代码>
s从内容中获取其高度；如果它们没有内容，就没有高度。当元素被绝对定位时，它们将从文档流中删除，并且不再被视为计算高度时父元素的内容。因此，如果Matthew建议改用float
，您可能会感觉更好。这应该对您有用，只需在#div1之后添加#divContainer中的内容，您就会看到容器扩展以适应该内容。