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

Question

我有一个表（引导主题，从 Django 管理生成）。

在其中一列中，我有一个 div，其中包含三个元素、锚点和两个跨度 - 每个跨度都显示引导字形图标。

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

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

我的问题是，当我向跨度添加 float:right 时，它会向右移动它们，但也会向下移动并扩展 div 高度。

在float:right后添加：

如何在向右移动元素的同时使图标保持与以前相同的垂直位置？ （我尝试过position:absolute和clear:both）。

Answer 1

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

根据这个答案我在StackOverflow上的其他地方找到的，你想要向右浮动的元素需要首先在你的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 元素，那么在浏览器布置任何其他元素之前，它就会正确地到达它应该在的位置。然后，没有 float:right 的元素将根据其通常的布局进行放置，包括调整自动宽度或自动边距以适应浮动元素。

我测试时并没有发生这种情况，但这种配置仍然可能导致它们彼此重叠，即使它们最初没有从原始位置向下推，但如果发生这种情况，请尝试添加显示器:像这样的内联块:

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

请参阅 this JSFiddle，了解它与放置在锚点之前的跨度一起使用的示例。

Answer 2

也许你应该发布所有代码，因为 float right 不应该这样做。请参阅 codepen：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

如果当您不希望它下降时，只需添加一个 “顶部边距：-(###)px;” 到CSS

Answer 4

请记住，使用浮动时，对象会继续浮动，直到与下一个对象接触。这与容器大小无关，因此如果您的物体太高......它们会产生阶梯效应。