Question

我在div中有四个元素。其中，我希望将最后一个元素推到最右边。我正在使用float：对于最后一个元素。这导致最后一个元素被推送到Firefox中下一行的右端。对于其他浏览器，渲染绝对没问题。我不能在HTML中进行任何修改。如何解决这个问题？

Answer 1

如果你分享你的代码，我可以帮助你更好。但我有一些建议：

1）width属性用于所有元素。（宽度的Element1 +宽度的Element2 +宽度的Element3 +宽度的Element4＆lt; = 100％）

2）box-sizing:border-box属性用于所有元素。

3）使用float:left' For the first three elements and float：right`作为最后一个元素。

这是示例：

.el1, .el2, .el3, .el4 {
    width: 20%;
    box-sizing: border-box;
    border: 1px solid orange;
    background-color: #000;
    color: orange;
    float: left;
}

.el4 {
    float: right;
}

<div class="wrapper">
    <div class="el1">Element1</div>
    <div class="el2">Element2</div>
    <div class="el3">Element3</div>
    <div class="el4">Element4</div>
</div>

这对我有用，我希望为你工作！

Answer 2

选中fiddle here。这在Firefox中运行良好。也许你可以调整CSS。

.container {
  width: 100%;
  height: 60px;
  background-color: green;
}

.el {
  width: 50px;
  height: 50px;
  background-color: red;
  display: inline-block;
  border: thin solid black;
}

.element4 {
  float: right;
}

<div class="container">
  <div class="el"></div>
  <div class="el"></div>
  <div class="el"></div>
  <div class="el element4"></div>
</div>

Answer 3

这是Firefox本身的一个错误。

https://bugzilla.mozilla.org/show_bug.cgi?id=488725

我已使用firefox特定样式修复它：

{{1}}

Float：右键导致元素在Firefox中推送到下一行

3 个答案: