DIVs的相对定位
DIVs的相对定位
提问于 2015-10-31 02:15:15
我在codeacademy上HTML & CSS课程，我对定位有点困惑。
我有这个html文件
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
display: inline-block;
height: 100px;
width: 100px;
border: 2px solid black;
}
div p {
position: relative;
margin-top: 40px;
font-size: 12px;
}
</style>
</head>
<body>
<div><p>Maxime</p></div>
<div><p>Killian</p></div>
<div><p></p></div>
</body>
因此，如果我像这样离开代码，我不会得到预期的结果。只有当我在第三个div中输入第三个名字时，它的行为才会像我想要的那样。看看这张照片，你就明白我的意思了。
这是怎么回事？为什么作为段落的嵌套元素会改变其父级的行为？
回答 4
Stack Overflow用户
发布于 2015-10-31 02:43:37
您需要设置CSS属性vertical-align。Mozilla Developer Network上提到的属性的定义(以简要摘要的形式)(您可以通过单击链接了解更多信息)如下：
垂直对齐CSS属性指定内联或表格单元格框的垂直对齐方式。
下面是上面提到的Mozilla Developer Network页面部分的截图：
在此特定示例的上下文中，您可以在容器div上进行如下设置：
div {
vertical-align: top;
}这将使所有包含的元素正确对齐。请看下面的工作示例：
div {
position: relative;
display: inline-block;
height: 100px;
width: 100px;
border: 2px solid black;
vertical-align: top; /*Add this property*/
}
div p {
position: relative;
margin-top: 40px;
font-size: 12px;
}<div>
<p>Maxime</p>
</div>
<div>
<p>Killian</p>
</div>
<div>
<p></p>
</div>
Stack Overflow用户
发布于 2015-10-31 02:43:01
只需在段落中添加一个浮动beavour
div p {
position: relative;
margin-top: 40px;
font-size: 12px;
float:left
}Stack Overflow用户
发布于 2015-10-31 02:50:35
只需将position从relative更改为absolute，一切都将就绪。
div p {
position: absolute; /*revised*/
margin-top: 40px;
font-size: 12px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33442471
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号