html - 包含元素时，Css div 内联不相邻

Question

Css 总是给我带来新的惊喜。

我想要 4 个 div 并排排列(或 2 和 2，取决于父级大小) 只要它们是空的，它就可以工作。如所附示例所示，一旦获取内容就会中断。

我很困惑。一个 div 的内容如何影响一个完整的不相关的 div？

.statistictable{
    display: inline-block;
    margin:20px;
    width: 300px;
    height:100px;
    background: #D9EFFF;
}
.statistics{
  border-bottom:5px solid;
}

<div class="statistics">
    <div class="statistictable">
I'am breaking!!!

    </div>
    <div class="statistictable">

    </div>
    <div class="statistictable">

    </div>
    <div class="statistictable">

    </div>
</div>
<div class="statistics">
    <div class="statistictable">


    </div>
    <div class="statistictable">

    </div>
    <div class="statistictable">

    </div>
    <div class="statistictable">

    </div>
</div>

Answer 1

我会使用 span 标签而不是 div，因为默认情况下 span 是内联的。这是否给出了预期的结果？

例如

<div class="statistics">
<span class="statistictable">


</span>
<span class="statistictable">
</span>
<span class="statistictable">

</span>
<span class="statistictable">

</span>
</div>