为什么在布局内部添加内容会弄乱布局？

Question

下面的布局2列布局将通过添加<p>Hello</p>搞砸...谁能给我一个提示？

<div style="width:1280px; font-size:0;">
   <div style="width:640px; height:200px; background:blue; display:inline-block;">
      <p>Hello</p>
   </div>
   <div style="width:640px; height:200px; background:yellow; display:inline-block"></div>
</div>

我可以看到“ p”的高度是否实际上大于200px，但实际上不是。 那么，为什么不将其放到其父内部并停止弄乱我的布局呢？

为了解决这个问题，我最终使布局列divs相对，并使用子div上的绝对位置作为“ p”的容器，但似乎缺少明显的东西使这种情况更简单...

Answer 1

内联块的确会在大多数时间中给代码中的空格留下一些不需要的空格。 我认为最好的解决方案是将其浮动并使用50％的宽度。

div {
  float: right;
  width: 50%;
  height: 200px;
  background:blue;

}

p标签会很好地进入。

jsfiddle上的示例

其他解决方案和信息，请参见http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

默认情况下，内联块项目垂直对齐为基线。 添加vertical-align:top

Jsfiddle演示

div {
    font-size:0; /* remove whitespace */
}

div div {
    font-size:1rem; /* reset font-size*/
    vertical-align: top;
}