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

Question

我正在学习 HTML/CSS，但遇到了问题。我目前正在研究 goodwill.heyscout.com 作为一个副项目。

从 learnlayout.org，我了解到用 div 构造布局的最佳方法是给内部一个位置：绝对，给外部一个位置：相对。这行得通。

但是，这会在我添加 position:absolute 时立即取消对齐（我想要并排的配置文件卡）。如果没有绝对位置，如果我想更改配置文件卡的布局，一切都会发生变化。正如您在底部的两张个人资料卡上看到的那样，它们对齐，因为它们没有改变。

谁能指出我正确的方向？我也知道我的代码非常混乱，而这正是我真正需要改进的地方......关于如何改进我的代码的任何其他建议也会很有用。

score 3 · Accepted Answer

float: left你可以在你的课堂上扔一个outer，这应该让他们再次并排坐着。您可能想在某些时候阅读使用浮点数，因为它们可能非常强大（如果一开始有点难以理解）

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

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

score 0 · Accepted Answer

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

为了改进，我将从不重复使用 id 开始（例如，就像您使用 #outer 和 #box 所做的那样，这些应该是类）。id 属性必须是唯一的，没有两个 DOM 元素应该具有相同的 id。

我还建议对#businesscards 使用 ul，因为它表示卡片列表。这将使#outer 成为一个里。您在#navlist 中执行此操作，所以您知道我的意思。

score 0 · Accepted Answer

只vertical-align: top;给你的#outerdiv。问题将得到解决。

由于这仅发生在子元素上，因此请提供以下内容来解决问题：

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

3 回答 3