2

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">- 当有一个值下降时，如何解决它？

在此处输入图像描述

4

2 回答 2

4

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

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

我叉了你的小提琴

于 2013-01-11T10:25:46.593 回答
2

小提琴

您需要添加vertical-align:top到spoiler-inner-content-block

于 2013-01-11T10:29:56.623 回答