<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;
}

下面是对实际情况的描述：

我说的两个 div 是右下角的方框。我如何将它们显示在彼此之上？我尝试对他们两个（以及 dividually 中的每个人）做 display:block，但这似乎没有帮助。

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

有什么解决办法吗？

谢谢。

Answer 1

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

这是一个sample

Answer 2

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

HTML:

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

CSS:

#rightCol { float: right; }

Answer 3

您必须清除第一个 div 的浮动，才能将第二个定位在第一个下方。也可以在这里查看：http://www.w3schools.com/css/css_float.asp.

我为你创建了一个fiddle：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;
}

<div> 当我向右浮动时，元素会内联显示吗？

<div> elements are displayed inline when I float them to the right?

html

css

css-float