如何确保内部div位于其父容器内？

Question

我正在试图让这个简单的东西工作 - 我有一个80px高的div - 其中我有其他div应该占用80px div的高度，并且只是填充空间，基本上将父div分成几个部分。现在内部的div被推到了整个地方，我不知道为什么。

这些盒子应该在黑色水平线上方互相拥抱。

JSFiddle：http://jsfiddle.net/Mk7L4/

HTML：

<div class="post-panel">
    <div class="upvote-area">
        <p>20</p>
    </div>
    <div class="title-area"> <a class="post-title" href="@post.Url"><strong>@post.Title</strong></a>

    </div>
    <div class="response-count-area"> <span>0 replies</span>

        <p>Active: Now</p>
    </div>
    <div class="view-count-area"> <span>0 views</span>

    </div>
</div>

在css中，我将容器元素的高度设置为80px，并将每个内部div设置为display: inline-block和height: 100%。

我做错了什么？

Answer 1

添加vertical-align：top;

.post-panel div {
    height: 100%;
    display: inline-block;
    vertical-align: top;
}

）