html - 如何设置高度？

Question

HTML:

<div class="spoiler-content-block">
    <div class="spoiler-inner-content-block">
        <div class="top-block top-block-tight">
            Name
        </div>
        <div class="bottom-block">
            <span class="previous-number">0</span>
        </div>
    </div>
    <div class="spoiler-inner-content-block">
        <div class="top-block">
            Time of last login
        </div>
        <div class="bottom-block">
            <br>
            <span class="previous-number">0</span>
        </div>
    </div>
    <div class="spoiler-inner-content-block">
        <div class="top-block top-block-tight">
            Status
        </div>
        <div class="bottom-block">
            <span class="current-number">0</span><br>
            <span class="previous-number">0</span>
        </div>
    </div>
</div>

CSS:

div.spoiler-content{
    border: 1px solid #DDDDDD;
    padding: 10px;
    white-space: nowrap;
    text-align:center;
}

div.spoiler-content-block{
    display: inline-block;
    border:1px solid #ececec; 
    white-space: normal; 
    padding: 5px;
    text-align: center;
    vertical-align: middle;
}

div.spoiler-inner-content-block{
    display:inline-block;
    white-space: nowrap;
}

.top-block{
    border: 1px solid #ececec;
    padding: 5px;
    margin-bottom: 5px;
    height: 30px;
}

.bottom-block{
    border: 1px solid #ececec;
    padding: 5px;
}

示例:http://jsfiddle.net/nonamez/aGQ8F/

问题出在<div class="bottom-block"> - 当有一个值触底时，如何解决？

Answer 1

尝试将 vertical-align:top 添加到您的 div.spoiler-inner-content-block

div.spoiler-inner-content-block{
    display:inline-block;
    white-space: nowrap;
    vertical-align:top;
}

我已经 forked your fiddle