當內容添加到其他元素時，html元素會移動

Question

我曾經有過這個問題很長一段時間，而且我似乎無法擺脫它。

我有個相對父DIV「包裝」
內部「包裝」我有一個絕對的div「tweetHolder」
內部「tweetHolder」我有2個與類「鳴叫」相對的div，這些水平對齊
（好吧，多數民衆贊成我想要的..）
如果這兩個div是空的，它們是對齊的。 如果我添加一個內容，另一個移動。

URL to JSFiddle

這是爲什麼，以及如何才能擺脫呢？

謝謝。

<div id="wrapper"> 
    <div id="tweetHolder"> 
     <div class="tweets EHBO"> 
      <div class="tweet"> 
       tweet 1 
      </div><div class="tweet"> 
       tweet 2 
      </div> 
     </div 
     ><div class="tweets drukte"> 
      <div class="tweet"> 
       tweet 3 
      </div><div class="tweet"> 
       tweet 4 
      </div><div class="tweet"> 
       tweet 5 
      </div><div class="tweet"> 
      tweet 6 
     </div> 
    </div>   
</div> 

#tweetHolder{ 
    position: absolute; 
    top: 100px; 
} 

.tweets{ 
    position: relative; 
    display: inline-block; 
    height: 200px; 
    width: 200px; 
} 

Answer 1

怎麼樣：

CSS

.EHBO{ 
    vertical-align: top; 
    […] 
} 

的默認對齊內聯元素爲baseline，因此使用top會做伎倆。

演示

Try before buy