Html 将 div 定位在其包含的 div 的右侧
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5450764/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Positioning a div to the right of its containing div
提问by manraj82
I know this question will sound very basic but i just am not able to fix it.I have got a div container and im trying to position the a child div to the right.I tried positioning the container div with relative and then positioning the child div with absolute,but the parent div loses its width.
我知道这个问题听起来很基本，但我无法解决它。我有一个 div 容器，我试图将子 div 定位到右侧。我尝试使用相对定位容器 div，然后定位孩子div 与绝对，但父 div 失去其宽度。
please have a look at the image above,i need the div1 to position itself right of the divContainer. I have got other nested divs in divContainer, i need only div1 to be postioned on the right.
请看上面的图片，我需要 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>
回答by Matthew Lehner
Assuming that #div1 is a nav type div, you should just float it to the side you want it.
假设 #div1 是导航类型的 div，您应该将它浮动到您想要的一侧。
div#div1{
height:45px;width:200px;
background:yellow;
float:right;
}
This will position it absolutely within your document. If you're having trouble with this, you may want to spend some time reading some good resources about CSS positioning. A List Aparthas great resources for CSS.
这将绝对定位在您的文档中。如果您在这方面遇到问题，您可能需要花一些时间阅读一些关于 CSS 定位的好资源。A List Apart为 CSS 提供了大量资源。
回答by Paul D. Waite
#divContainershouldn't lose its width based on your description, but it will lose its height if all its child divs are absolutely positioned.
#divContainer根据您的描述，不应失去其宽度，但如果其所有子 div 都绝对定位，它将失去其高度。
The best method for positioning #div1depends on whether you want it to affect the position of the other chid divs. If so, apply float: right;to #div1. If not, position: absolute;is the way to go; you may want to add padding to the right of #divContainerso that #div1doesn't sit on top of the other child divs.
定位的最佳方法#div1取决于您是否希望它影响其他chid div的位置。如果是的话，申请float: right;到#div1。如果没有，position: absolute;是要走的路；您可能希望在 的右侧添加填充，#divContainer这样#div1它就不会位于其他子 div 的顶部。
Is this what you're aiming for?
这就是你的目标吗？
