当我将它们向右浮动时，<div>元素是否内联显示？

Question

基本上，我的页面上有两个元素，当我使用float:right;向右移动它们时，它们彼此相邻（内联）而不是彼此重叠（块）。

这是第一个元素的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;
}

以下是究竟发生了什么的代表：

我正在谈论的两个部分是右下角的方框。 如何将它们显示在彼此之上？ 我尝试对它们两个（以及每个单独的）进行display:block但这似乎没有帮助。

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

任何解决方案？

感谢。

Answer 1

一种解决方案是将它们封装在一个div中，然后将其浮动到右侧。

HTML：

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

CSS：

#rightCol { float: right; }

Answer 2

我还没有看到您的完整代码，但我猜您需要移除float:right;并将其替换为display:inline-block;

这是一个sample

Answer 3

你必须清除第一个div的浮动，将第二个div放在第一个div之下。另请看这里：http://www.w3schools.com/css/css_float.asp。

我为你创造了一个小提琴：https://jsfiddle.net/241qpda8/。

<div id="upgradeInfo">
    upgradeinfo
</div>

<div class="clear"></div>

<div id="safeTimer">
    safeTimer
</div>

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

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

.clear {
    clear: both;
}