我已经准备了一个示例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.
要明确地强调这一点,我不需要在这里改变任何东西.砖的例子只是一个有趣的演示我正在观察的问题.
当一个内容插入这样一个安排的时候,我真的有兴趣了解什么是导致元素改变他们的位置.
解决方法
如果您将标记简化为每个包含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>
然后给这个div分配一个不同的高度和一些CSS.
.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的底部边线对齐.
+------+
| |
| |
+------+ |
| | +------+
| | |Text |
+------+------+ |
| |
+------+
如其他人所指出的,您可以通过设置不同的vertical-align属性来更改发生的情况.例如,添加vertical-align：top到.cell选择器会给你这样的东西：
+------+------+------+
| | |Text |
| | | |
+------+ | |
| +------+
| |
+------+
我觉得最简单的方法是在codepen里玩这种东西,在这里你可以看到这些变化. Here’s an example试验.
