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，但事实并非如此。那么为什么不进入它的父母并且不再搞乱我的布局？

为了解决这个问题，我最终使布局列div相对，并使用子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 Demo

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

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

为什么在布局中添加内容会搞砸布局？

2 个答案: