当内容添加到其他元素时，html 元素移动

Question

这个问题我已经有一段时间了，我似乎无法摆脱它。

我有一个相对的父 div“包装器”
在“wrapper”里面我有一个绝对的 div“tweetHolder”
在“tweetHolder”中，我有 2 个相关的 div，类为“tweets”，它们是水平对齐的
(好吧，这就是我想要的......)
如果这两个 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