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

Question

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

这是我的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;”优先于其他 float 。您也可以将其他类(class)编辑为

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

在实现新的 float 之前应该清除容器类中剩余的 float 。