html - <div> 元素在我向右浮动时内联显示？

Question

基本上，我的页面上有两个元素，当我使用 float:right; 将它们都 float 到右侧时，它们会彼此相邻(内联)显示，而不是显示在每个元素的顶部其他( block )。

这是第一个元素的 CSS:

div#upgradeInfo{
    border: 2px solid white;
    float:right;
    padding:10px;
    font-size: 100%;
}

这是第二个的 CSS。

div#safeTimer{
    border: 2px solid white;
    float:right;
    padding: 10px;
}

下面是对究竟发生了什么的表示:

我所说的两个 div 是右下角的框。 我如何将它们显示在彼此之上？ 我尝试对它们都执行 display:block(以及对每个单独执行)，但这似乎没有帮助。

我可以使用绝对定位轻松实现这一点，但在所有屏幕上看起来都不好。

有什么解决办法吗？

谢谢。

Answer 1

一个解决方案是将它们都包含在一个 div 中，然后将其 float 到右侧。

HTML:

<div id="rightCol">
    <div id="safeTimer">...</div>
    <div id="upgradeInfo">...</div>
</div>

CSS:

#rightCol { float: right; }