边框在不应该应用于兄弟姐妹时

Question

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

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

class tf-attribute 的 Div 应该有一个寄宿生：

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

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

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

作为对我收到的评论的回应：

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

Answer 1

你错过了关闭div tag

查看 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>

Answer 2

将您的 html 更改为

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

</div>

Answer 3

因此，出于某种原因，div.officer.tf-attribute 碰巧调整了自身的大小以包含 div.symegrid 的确切边界，而将自己的内容留在下方。因此 div.symegrid 似乎只有一个边框，并且因为 div.officer.tf-attribute 的内容夹在两个带边框的 div 之间，所以它本身似乎有一个边框。（仍然无法在 fiddle 中做到这一点，但无论如何）

无论如何，我只需要添加

div.tf-attribute{
  overflow: hidden;
}

一切都变得更好了。 :-P 感谢所有愿意花时间研究这些废话的人。

边框在不应该应用于兄弟姐妹时

Border is applied to siblings when it shouldn't be

html

css

border

erb