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

Question

我想在 IE7 的容器 div 中浮动两个 div。容器中的第一个 div 应该向左浮动，第二个向右浮动。实际上，这两个 div 在我的 css 配置中浮动到左侧。

这是我的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 |
#-#-    |~~~~~~~~~~~~|. . . . . . . . . . . . . . . .|~~~~~~~~~~~~~|
#-#-
#-#-#-#-#-#-#-#-#-#-#-#--#-#-#-#-#-#-#-#-#-#-#-#--#-#-#-#-#-#-#-#-#-#-#-

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

在实现新的浮点数之前，它应该清除容器类留下的浮点数。