如何设置高度?

时间:2013-01-11 10:19:18

标签: html css

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"> - 当有一个值到底时,如何解决?

enter image description here

2 个答案:

答案 0 :(得分:4)

尝试在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

答案 1 :(得分:2)

Fiddle

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