Div保持重叠上部div

Question

我正在使用Angular4，而且我正在创建可视组件。

我创建了2个元素，一个是内联块，第二个是块。通过logict，如果我首先放入内联块，它应该有正确的空间，第二个组件应该出现在下一行。

在我的情况下，当我首先放置块1时，内联块会下降，但是当我将内联块放在第一位时，第二块会继续上升并重叠（并混合元素）... < / p>

这是第一种情况下的看法

当我把元素块放在第二位时会发生这种情况

他们都定义了尺寸和显示......你能帮助我吗？

Answer 1

我认为显示属性不是问题，因为它不是block和inline-block值的常见行为。之后或之前放置一个或另一个不会影响显示每个在不同的行。

检查此代码段：

＆＃13;

＆＃13;

.container{

border: 1px solid black;
margin: 1em;
padding: 1em;

}
.blocky{ 
  display: block; 
  height: 2em; border: 1px solid red; 
 }
.inliny-blocky{
      display: inline-block; height: 1em; 
      width: 2em; border: 1px solid green; 
 }

＆＃13;

<div class="container">
  <div class="inliny-blocky"></div>
  <div class="blocky">
  </div>
</div>

<div class="container">
  <div class="blocky"></div>
  <div class="inliny-blocky"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

检查使div重叠的任何其他css样式。

Answer 2

使用带有内联块的父div

Answer 3

使用

标签，如下所示

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