Javascript Div保持与上Div重叠

我正在使用Angular4，我正在创建视觉组件

我创建了两个元素，一个是内联块，第二个是块。根据logict，如果我把内联块放在第一位，它应该有正确的空闲空间，第二个组件应该出现在下一行

在我的例子中，当我首先放置块1时，内联块下降，但当我首先放置内联块时，第二个块继续上升并重叠（并混合元素）

这是第一种情况下的情况

这就是当我把元素块放在第二位时发生的情况

---

它们都有定义的大小和显示。。。你能帮我吗？

使用标签，如下所示

<p>
  <md-checkbox class="example-margin" ngDefaultControl></md-checkbox>
</p>
<p>
    <md-input-container>
      <input mdInput placeholder="Name" formControlName="name" 
         maxlength="300" ngDefaultControl>
    </md-input-container>
</p>

我认为显示属性没有问题，因为它不是

块

和

内联块

值的常见行为。将一个或另一个放在后面或前面不应该影响在不同的行中显示每一个

检查此代码段：

.container{
边框：1px纯黑；
边缘：1米；
填充：1em；
}
.blocky{
显示：块；
高度：2米；边框：1倍纯红；
}
.内部块状{
显示：内联块；高度：1米；
宽度：2米；边框：1倍纯绿色；
}

将父div与内联块一起使用

为什么不只使用两个

display:block

？因为正如我在图片中所标记的，它们可以是多个内联块元素。我只需要一个大的块。不管怎样，忘掉旧的内联块。Flexbox是生命，Flexbox是我们的救星。无论如何，如果我们有你的HTML+CSS来处理会更容易。寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。看：如何创造一个我建立欲望行为（把一切都放在它应该的地方，不要把东西混在一起），也建立问题。。。说div是block和inline block。这就是它所需要的一切。我还包括了图片，所以我看不出问题所在@Pete