Question

我有一个由盒子组成的简单布局。

我在<div>个标签中有<div>个标签;我正在使用它们来“定义”我可以在以后打印输入的块。

<div class=display-window>
    <div id=pieces>
    </div>    
    <div id=vline></div>
    <div id=message>
        <p>Nothing special is going on</p>
    </div>
  </div>

当我取出<p>元素时，显示效果很好。但当它在那里时，盒子向下滑动，然后离开。这适用于#pieces和#message。似乎框会滑动，直到该段落在其顶部。我希望盒子留在那里。

如果可以的话，儿童元素不应该让父母不受干扰吗？！这感觉非常不灵活！

注意：我在codecademy.com和fiddle.net之间得到了截然不同的结果，因此我很难准确地说出发生了什么。边距和填充解决了这个问题，但这又是不灵活的：我想在执行期间删除标记。

Answer 1

这与您的内联块样式元素有关。默认情况下，所有内联块元素都有一个垂直对齐设置为基线，在您的情况下，它是您的垂直线（line-height）的底部[div#vline]（可能是16px）你的div。

将p-align设置为p元素容器的顶部，效果很好：

#message
{
    vertical-align: top;
}

插入标记时HTML布局怪癖

1 个答案:

JSFiddle