这个HTML5砖怎么会掉下来？

Question

我准备了一个示例jsfiddle来显示我目前面临的布局问题:当我将内容动态插入到特定元素(砖块)中时,元素与其父元素一起以一种超出我理解的方式下沉HTML/CSS.当我删除内容时,原始布局将被恢复,除非我使用Chrome ...然后它将保留其位置并在插入新内容时再次下降.

概念证明:http://jsfiddle.net/GADk9/

示例中的复选框只是切换砖内的文本,仅此而已.我想知道上面的余量(是吗？)来自哪里.

这是一个完整的HTML5文档:

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>HTML5 Falling Brick - What is this?</title>
<style>
#brick {
    background-color: lightgray;
    border: solid black medium;
    border-radius: 1em;
    color: red;
    font-size: 2em;
    height: 100%;
    text-align: center;
}
#contrail { background-color: lightblue; width: 20em; }
#pit { display: table; }
#pit>* { display: table-cell; }
#pit>*>* { height: 4em; }
</style>
</head>
<body>
    <div>
        <label>Click me twice
            <input onchange="document.getElementById('brick').innerHTML = this.checked ? 'FALL!!!' : ''" type='checkbox'></input>
        </label>
    </div>
    <div id='pit'>
        <div>
            <div>
            </div>
        </div>
        <div id='contrail'>
            <div>
                <div id='brick'></div>
            </div>
        </div>
    </div>
</body>
</html>

更新

在再次阅读我的问题后,我意识到这可能表明我实际上想要完成的不正确的印象是修复一些HTML.为了明确强调这一点,我不需要在这里改变任何东西.砖块的例子只是我正在观察的问题的一个有趣的演示.我真的很想知道在这样的安排中插入内容时导致元素改变位置的原因.

Answer 1

如果将标记简化为几个单元格，每个单元格包含一个 div，这会更容易理解。

<div class="cell left">
  <div class="inner"></div>
</div>
<div class="cell middle">
  <div class="inner"></div>
</div>
<div class="cell right">
  <div class="inner"></div>
</div>

然后使用 CSS 为每个 div 分配不同的高度，如下所示。

.cell {
  display:table-cell;
  background-color:black;
  width:200px;
}

.inner {
  background-color:silver;
}

.left .inner {
  height:80px;
}
.middle .inner {
  height:140px;
}
.right .inner {
  height:100px;
} 

默认情况下，这些内部 div 与其基线垂直对齐。因此，在没有任何文本的情况下，所有 div 都沿着单元格底部对齐：

       +------+
       | |
       | +------+
+------+ | |
| | | |
| | | |
+------+------+------+

但是，如果您向其中任何一个添加文本，该 div 将被下推，以便第一行文本的基线与其他 div 的底部边缘对齐。

       +------+
       | |
       | |
+------+ |      
| | +------+
| | |文字|
+------+------+ |
              | |
              +------+

正如其他人所指出的，您可以通过设置不同的vertical-align属性来更改发生的情况。例如，添加vertical-align:top到.cell选择器将为您提供如下内容：

+------+------+------+
| | |文字|
| | | |
+------+ | |
       | +------+
       | |
       +------+           

我发现在 codepen 中处理此类事情最简单，您可以在其中看到所做的更改。这是一个可以进行实验的示例。