css - 如何确保内部 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

添加垂直对齐:顶部；

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

;)