如果我在position:relative div中添加position:absolute (css)，为什么div会不

Question

我正在学习HTML/CSS，我遇到了一个问题。我目前正在把goodwill.heyscout.com作为一个业余项目。

从learnlayout.org上，我了解到用div构建布局的最佳方法是给内部一个位置:绝对，给外部一个位置:相对。这个作品。

然而，一旦我添加位置:绝对(我想要配置文件卡并排)，这就抛出了对齐。没有绝对位置，如果我想改变配置卡的布局，所有东西都会被移动。正如你可以看到在底部的两个个人资料卡，他们对齐，因为那些没有改变。

谁能给我指个正确的方向?我也知道我的代码很乱，这是我真正需要改进的地方……任何其他关于如何改进我的代码的建议也会很有用。

Answer 1

你可以把float: left扔到你的outer类，这应该让他们坐在一起了。在某些时候，你可能需要仔细阅读浮点数的使用，因为它们非常强大(如果一开始你有点难以理解)

.outer {
    width: 49%;
    display: inline-block;
    float: left;
}

顺便说一句，我注意到你多次使用id="outer"。您应该将其更改为class="outer"，因为ID应该是唯一的，而一个类可以多次使用。在上面的CSS中，您将看到我使用.outer作为我的类名目标(而不是通过ID目标的#outer)

Answer 2

你发现了一个有趣的问题。我不能确切地告诉你为什么它的行为是这样的，但它似乎与有文本直接在#boxdiv或没有。如果您从第二个文件中删除"测试"，它将按照您的期望对齐。同样，如果在第二个div中放置与第一个div完全相同的内容，它们将对齐。

为了改进，我将从永远不要重用id开始(就像你对#outer和#box所做的那样，这些应该是类)。id属性必须是唯一的，没有两个dom元素具有相同的id。

我还建议使用ul作为#businesscards，因为它代表一个卡片列表。这将使#outer和li。你在#navlist中做过这样你就知道我的意思了

Answer 3

把vertical-align: top;放到你的#outerdiv里，问题就解决了。

由于这种情况只发生在子元素上，因此给出如下命令来解决这个问题:

div > * {  /* or just  '*' */
    vertical-align: top; /* or middle */
}