Question

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

我有一个亲戚父div“包装”
在“包装”里面我有一个绝对的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

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

1 个答案: