html - 边框在不应该应用于 sibling 时

Question

我遇到了一个看似非常基本的 css 问题，但应该不是问题。我有三个 div:(直接从firebug输出。每个div包含很多内容和嵌套的形式partials(rails)所以下面是一个缩写)

<div class="dynamic-container person">
    <div class="symegrid"></div>
    <div class="officer tf-attribute"></div>
    <div class="director tf-attribute"></div>
</div>

类 tf-attribute 的 div 应该有一个边界:

div.tf-attribute{
    border: medium solid #a5ac20;
    border-radius: 10px;
    padding: 20px;
}

奇怪的是边框被应用到类 symegrid 的 div。当我使用 firebug 检查 symegrid div 的计算属性时，没有列出边框。如果我去掉 tf-attribute 的边框，symegrid 周围的边框就会消失。

我怀疑是否有人能够就此给我一个明确的答案，但我的想法已经用完了。有没有人见过这种行为？任何想法/想法将不胜感激。

回应我收到的评论:

有人非常公平地建议我在 fiddle 或类似的东西中发布问题的重现。我目前正在尝试在 fiddle 中重现此问题，但目前还不能。如果我能够这样做，我会发布它(尽管我怀疑复制它可能会给我解决问题所需的信息)

Answer 1

您缺少结束 div 标签

参见 fiddle :“https://jsfiddle.net/s48o7kr1/”

代码变为:

<div class="dynamic-container person">
    <div class="symegrid"></div>
    <div class="officer tf-attribute"></div>
    <div class="director tf-attribute"></div>
</div>