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">
- 当有一个值到底时,如何解决?
答案 0 :(得分:4)
尝试在vertical-align:top
div.spoiler-inner-content-block
div.spoiler-inner-content-block{
display:inline-block;
white-space: nowrap;
vertical-align:top;
}
答案 1 :(得分:2)
您需要将vertical-align:top
添加到spoiler-inner-content-block