在宽度为100%的div容器中，IE7中的左浮动和右浮动

Question

我希望在IE7浏览器中，将两个div浮动在一个容器中。第一个div应该向左浮动，第二个div向右浮动。实际上，在我的CSS配置中，这两个div都是向左浮动的。

以下是我的CSS代码：

.container {float:left; width:100%; height:30px;}
.left {float:left; width:auto; height:30px;}
.right {float:right; width: auto; height:30px}

这是我的HTML代码

<div class="container">
    <div class="left">To the Left!</div>
    <div class="right">To the Right!</div>
</div>

这应该是结果：（这里的点是空格；）

#-#-#-#-#-#-#-#-#-#-#-#-#-# Container -#-#-#-#-#-#-#-#-#-#-#-#-#-#-#-#-#
#-#-
#-#-    |~~~~~~~~~~~~|. . . . . . . . . . . . . . . .|~~~~~~~~~~~~~|
#-#-    |To The Left | . . . . . . . . . . .  . . . .|To the Right |
#-#-    |~~~~~~~~~~~~|. . . . . . . . . . . . . . . .|~~~~~~~~~~~~~|
#-#-
#-#-#-#-#-#-#-#-#-#-#-#--#-#-#-#-#-#-#-#-#-#-#-#--#-#-#-#-#-#-#-#-#-#-#-

- user1663417

---

我不使用IE7，但它在fiddle上运行良好。所以我的猜测是在.left div中添加margin-right:。 - cube

我认为这个问题与此https://dev59.com/GnVC5IYBdhLWcg3wykQt相同（或类似）。 - Fred

Answer 1

替换

.container {float:left; width:100%; height:30px;}

使用

.container {width:100%; height:30px;}

你的容器类 "float:left;" 的优先级高于其他浮动。你可以选择编辑其他类来

.left {clear: both; float:left; width:auto; height:30px;}
.right {clear: both; float:right; width: auto; height:30px;}

应该在实施新的浮动前，清除容器类中的左浮动。

- barbajoe

---

孩子们应该相对于它们的容器定位（您可能需要在容器中显式添加position:relative）。将浮动添加到容器中不应优先于任何内容，并且应确保容器扩展以容纳浮动的子元素（就像清除浮动一样）。我会倒转顺序，使右浮动的元素在左浮动之前（虽然这对此问题并不重要），但您肯定不必从容器中删除float。 - Matt Whipple

我同意你不应该删除原始的float，这就是为什么我建议使用clear:both;选项。我也知道user1663417使用的原始代码在IE 9中有效，但由于我没有IE 7，所以无法进行广泛的测试，而clear:both;选项对我总是有效的。 - barbajoe

“清除浮动”与容器类中的信息完全具有误导性。这不是clear所做的事情，也不像与此问题相关。 - Matt Whipple