css – 这个HTML5砖怎么会掉下来？

我已经准备了一个示例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试验.

原文地址：https://www.jb51.cc/css/216618.html

css – 这个HTML5砖怎么会掉下来？

解决方法

相关推荐