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>

班级tf-attribute的分区应该有一个寄宿生：

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

奇怪的是边界正在应用于班级symegrid的div。当我使用firebug检查symegrid div的计算属性时，不会列出任何边框。如果我从tf-attribute移开边界，则symegrid周围消失。

我怀疑任何人都能在这方面给我一个不同的答案，但我已经没有想法了。以前有人见过这种行为吗？任何想法/想法将不胜感激。

回应我的评论：

我非常公平地建议我用小提琴或类似的方式发布问题的复制品。我目前正试图在小提琴中重现这个问题，但可以＆到目前为止＃39; t。如果我能够这样做会发布它（虽然我怀疑复制它可能会给我解决问题所需的信息）

Answer 1

您错过了结束div tag

请参阅小提琴：“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更改为

Column AC Column AD (expected results)
2304      3
 760      3
 467      2
1500      3
-500     -2
  10      0
  25      0
-146     -1
-249     -1
 132      1

Answer 3

因此出于某种原因，div.officer.tf-attribute碰巧正在调整自身以包含div.symegrid的确切边界，并在下面留下自己的内容。因此div.symegrid似乎只有一个边界，因为div.officer.tf-attribute的内容在两个有边界的div之间被勾勒出来，所以它本身似乎有一个边界。（仍然无法在小提琴中做到这一点，但无论如何）

无论如何，我只需要添加

div.tf-attribute{
  overflow: hidden;
}

一切都好了。 :-P感谢所有在这种废话上花时间的人。

边界应用于兄弟姐妹，当它不应该

3 个答案: