CSS float right向右和向下移动元素(我不想放下).

Question

我有一个表(bootstrap主题,由Django管理员生成).

在其中一列中,我有一个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上的其他地方找到的这个答案,你想要浮动的元素需要首先在你的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>

这个bug在我自己的网站上给我带来了各种各样的麻烦,但是一旦我发现了这个,我意识到理解这个修复实际上非常简单.当你将float:right元素放在其他所有元素之后,它就会像你要求的那样向右浮动.但是如果右边没有足够的空间(或者如果某些浏览器渲染的怪癖让它认为没有足够的空间)那么该元素也会被推下来,因此浏览器会认为它适合.但是如果你先放置float:right元素,那么它会在浏览器布局任何其他元素之前向右移动.然后没有浮动的那些:右边根据它们的通常布局放入,包括调整自动宽度或自动边距以适应浮动元素.

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

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

请参阅此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;
}