CSS float right向右和向下移动元素（我不想放下）。

Question

我有一个表（bootstrap主题，由Django admin生成）。

在其中一列中，我有一个div，它包含三个元素，锚点和两个跨度 - 每个跨度显示bootstrap glyphicon。

<div class="my-fixed-width under-review data-sent-false">
    <a href="myobjectview/789/" style="inline-block;">C4U0UACXX-8 6nb</a>&nbsp;
    <span class="glyphicon glyphicon-asterisk" style="color:blue"></span>
    <span class="glyphicon glyphicon-pause" style="color:darkgray"></span>
</div>

我希望将图标移到右侧（理想情况下，在同一列中的表格元素之间排列）。

我的问题是，当我添加浮动时：向右移动它，它会向右移动，但也向下移动并扩展div高度。

浮动之后：右边添加：

如何将图标保持在与以前相同的垂直位置，同时向右移动元素？ （我尝试过的位置：绝对的，明确的：两者都有。）

Answer 1

这个问题已经存在了一段时间，但我找到了一个很好的答案，所以我想分享。

根据我在StackOverflow上的其他地方发现的this answer，您想要在右侧浮动的元素需要首先在您的html结构中给出。

<div class="my-fixed-width under-review data-sent-false">
    <span class="glyphicon glyphicon-asterisk" style="color:blue"></span>
    <span class="glyphicon glyphicon-pause" style="color:darkgray"></span>
    <a href="myobjectview/789/" style="inline-block;">C4U0UACXX-8 6nb</a>&nbsp;
</div>

这个错误在我自己的网站上给我带来了各种各样的麻烦，但是一旦我发现了这个错误，我就意识到理解修复它真的很简单。当你将float：right元素放在其他所有元素之后，它就会像你要求的那样向右浮动。但是如果右边没有足够的空间（或者如果浏览器渲染的某些怪癖让它认为那里没有足够的空间）那么该元素也会被推下来，所以浏览器会满意它会适合。但是如果你把float：right元素放在第一位，那么它就会在浏览器列出任何其他元素之前就已经到了正确的位置。然后没有浮动的那些：右边根据它们的通常布局放入，包括调整自动宽度或自动边距以适应浮动元素。

当我测试时没有发生这种情况，但是这种配置可能仍会导致它们彼此重叠，即使它们最初没有从原始位置下推，但如果发生这种情况尝试添加display：inline-block，如下所示：

span.glyphicon{
    float:right;
    display:inline-block;
}

请参阅this JSFiddle关于使用锚点之前放置的跨度的示例。

Answer 2

也许你应该发布所有代码，因为浮动权利不应该这样做。看到该代码：http://codepen.io/mbrillaud/pen/myKjPO

.my-fixed-width{
    width:200px;
    background-color: orange;
}
.icon{
    float: right;
}

如果你想使用position：absolute，不要忘记将父级设置为position：relative，如下所示：http://codepen.io/mbrillaud/pen/jEKpqx

.my-fixed-width{
    position: relative;
    width:200px;
    background-color: orange;
}
.icon{
    position: absolute;
    right: 0;
    top: 0;
}

Answer 3

如果它在你不想要的时候熄火，那么只需添加一个  ＆＃34;保证金顶部： - （###）px;＆＃34; 到CSS