html - html元素在内容添加到其他元素时移动

Question

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

我有一个相对父 div “wrapper”
在“wrapper”里面我有一个绝对 div “tweetHolder”
在“tweetHolder”里面我有 2 个相对 div 类“tweets”，这些是水平对齐的
（嗯，这就是我想要的..）
如果这两个 div 都是空的，则它们是对齐的。如果我将内容添加到一个，另一个移动。

JSFiddle 的 URL

为什么会这样，我该如何摆脱它？

谢谢。

<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就可以了。

演示

先试后买