2013-01-11 82 views
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"> - 当有一个值,它会下,如何解决呢?

enter image description here

回答

4

尝试添加vertical-align:topdiv.spoiler-inner-content-block

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

我已经forked your fiddle

2

Fiddle

您需要添加vertical-align:topspoiler-inner-content-block

+0

因为他比我快,所以他给了西蒙他的答案。 – Bart