css - 右浮动跨度似乎不在父 div 中

Question

我试图在我的消息栏中浮动一个跨度。出于某种原因，在我的网页上，右侧的浮动跨度在视觉上显示在 div 下方。在 JS fiddle 中它看起来不错。是什么推动了它？

html:

<div class="msg">
    Some thext here
    <span class="goright">Close</span>
</div>

CSS：

.msg {
    background-color: green;
}

.goright {
    float:right;
}

score 4 · Accepted Answer

我相信这只是 IE7 及以下内容本身将浮动元素向下推的问题。在现代浏览器中，它不应该被按下。但是要解决这个问题，将浮动跨度放在内容应该可以工作之前。

<div class="msg">
    <span class="goright">Close</span>
    Some thext here
</div>

score 0 · Accepted Answer

另一种可能的解决方案是，如果您想完全控制的放置，span则使用绝对定位。

.msg {
    background-color: green;
    position: relative;
}

.goright {
    position: absolute;
    right: 0;
    top: 0;
}

这样，无论内容多少，无论div内元素的顺序如何，都不会被下推。

2 回答 2