为什么我的布局搞乱了

I have an angular app, and in certain states, the layout errors. I have a fiddle here of a DOM snapshot of the problem: https://jsfiddle.net/g8kjfj2g/

我有一个角度应用程序,在某些状态下,布局错误。我有一个关于问题的DOM快照的小提琴:https://jsfiddle.net/g8kjfj2g/

I don't understand why the two boxes in the top container aren't on the same line. They're both "display: inline-block" and have the same class. Compare here for a different DOM snapshot where two of the "parent-item" boxes exist on the same line: https://jsfiddle.net/wr10z3oc/

我不明白为什么顶部容器中的两个盒子不在同一条线上。它们都是“display:inline-block”并且具有相同的类。比较一下不同的DOM快照,其中两个“父项”框存在于同一行:https://jsfiddle.net/wr10z3oc/

.parent-item {
display: inline-block;
height: 200px;
width: 200px;
background-color: lightgray;
opacity: .7;
}

I think I have a missing symbol somewhere in my HTML but all my Sublime parsers can't find it.

我想我的HTML中有一个缺少的符号,但是我所有的Sublime解析器都找不到它。

1 个解决方案

#1

Try overflow:hidden in .parent-item - https://jsfiddle.net/g8kjfj2g/1/

尝试溢出:隐藏在.parent-item中 - https://jsfiddle.net/g8kjfj2g/1/

.parent-item {
    display: inline-block;
    height: 200px;
    width: 200px;
    background-color: lightgray;
    opacity: .7;
    overflow:hidden
}