div 不断重叠上 div

Posted 2023-02-23

【中文标题】div 不断重叠上 div

【英文标题】：Div keeps overlapping upper div

【发布时间】：2018-04-06 12:58:00

【问题描述】：

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

我创建了2个元素，一个是inline-block，第二个是block。按照逻辑，如果我把内联块放在第一位，它应该有正确的空间，第二个组件应该出现在下一行。

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

这是第一种情况下的样子

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

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

【问题讨论】：

为什么不只是两个display:block？

因为我在图片中标记，它们可以是几个内联块元素。我只需要阻止大的。

不管怎样，忘记旧的内联块的东西。 Flexbox 就是生命，Flexbox 是我们的救星。无论如何，如果我们可以使用您的 html + CSS 会更容易。

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没有用处。请参阅：如何创建minimal reproducible example

我建立了欲望的行为（把所有东西都放在应该的地方，而不是把东西混在一起），也稳定了问题……说 div 是块和内联块。它所需要的一切。我还包括了图片，所以我没有看到问题@Pete

【参考方案1】：

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

检查这个sn-p：

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

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

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

【参考方案2】：

将父 div 与内联块一起使用

【参考方案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>