html - 在内联块容器中添加内容时出现问题

Question

这是我当前的代码：

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    background: #000;
    color: #666;
}

body, html {
    height: 100%;
}

#panels {
    height: 100%;
}

#left, #right {
    display: inline-block;
    border: solid 1px #006161;
    height: 100%;
    width: 50%;
}
#lt {
  height: 50px;
  background: #202020;
}

<div id="panels"><div id="left"><div id="lt"></div></div><div id="right"></div></div>

当我尝试将内容添加到“lt”容器时出现问题，如下所示：

<div id="lt">1</div>

整个“左”容器在其父容器内向下移动。

我想知道它为什么会发生以及如何解决它，谢谢！

标签： htmlcss