Question

我正在做HTML＆amp;在codeacademy的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中输入第三个名字时，它才会表现得像我想要的那样。看看这张照片让你知道我的意思。

这里发生了什么？为什么嵌套元素是改变父母行为的段落？

Answer 1

您需要设置CSS属性vertical-align。 Mozilla Developer Network上提到的财产定义（简要总结）（您可以点击链接了解更多信息）如下：

vertical-align CSS属性指定了一个垂直对齐方式内联或表格框。

以下是上述Mozilla Developer Network页面部分的屏幕截图：

在此特定示例的上下文中，您可以在容器div上将其设置如下：

div {
   vertical-align: top;
}

这将使所有包含的元素正确对齐。请参阅下面的工作示例：

＆＃13;

    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;
        
    }

＆＃13;

<div>
    <p>Maxime</p>
</div>
<div>
    <p>Killian</p>
</div>
<div>
    <p></p>
</div>

＆＃13;

Answer 2

只需将FLOAT beavour添加到段落

即可

div p {
   position: relative;
   margin-top: 40px;
   font-size: 12px;

   float:left
}

working feedle

Answer 3

只需将position从relative更改为absolute，所有内容都会排成一行。

div p {
   position: absolute; /*revised*/
   margin-top: 40px;
   font-size: 12px;
}

Answer 4

div {
    position: relative;
    display: table;
    height: 100px;
    width: 100px;
    border: 2px solid black;
    float: left;
}
div p {
    position: relative;
    margin-top: 0;
    font-size: 12px;
    vertical-align: middle;
    display: table-cell;
}

<!DOCTYPE html>
<html>
<head>
 </head>
<body>
    <div><p>Maxime</p></div>
    <div><p>Killian</p></div>
    <div><p>Lukas</p></div>
</body>

DIV的相对定位

4 个答案: