向左漂浮并向右漂浮在宽度为100％IE7的div容器中

Question

我想在IE7中的一个container-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;}

你的容器类＆＃34; float：left;＆＃34;优先于其他花车。你也可以编辑你的其他课程

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

应该在实现新的浮点数之前从容器类中清除浮动。