Html IE7中浮动div扩展到100%

我有以下简单的布局：

div.main
{
    width: 300px;
    border: 2px solid #98999E;
    overflow: auto;
}
div.main > div
{
    float: right;
    border: 2px solid #FF3700; 
    margin: 2px;
}
div.inner > div
{
     float: right;
}

<div class="main">
    <div class="inner">
        <div>123</div>
        <div>456</div>
    </div>
    <div>999</div>
</div>

div.main
{
宽度：300px；
边框：2个实心#98999E；
溢出：自动；
}
div.main>div
{
浮动：对；
边框：2个实心#FF3700；
保证金：2倍；
}
分区内部>分区
{
浮动：对；
}
123
456
999

在Chrome和Firefox中，这是按预期呈现的-所有内容都在同一行中：

但是，当在IE7（或者确切地说是在兼容模式下的IE8）中测试时，主div下的第一个div的宽度为100%，因此第二个div被推到它下面：

可以找到一个例子

这怎么能解决呢

（编辑： 事实证明，IE9在兼容模式下也会出现这种情况）

---

（编辑2:这似乎只在

float:right

上发生，而不是在

float:left

上发生）

尝试添加一个样式为clear:

div.main{
    width: 300px;
    border: 2px solid #98999E;
    overflow: auto;
}
div.main > div {
    float: right;
    border: 2px solid #FF3700; 
    margin: 2px;
}
div.inner > div {
    float: right;
}
div.clear{
    clear:both;
}

<div class="main">
    <div class="inner">
        <div>123</div>
        <div>456</div>
    </div>
    <div>999</div>
    <div class='clear'>
</div>

div.main{
宽度：300px；
边框：2个实心#98999E；
溢出：自动；
}
div.main>div{
浮动：对；
边框：2个实心#FF3700；
保证金：2倍；
}
分区内部>分区{
浮动：对；
}
分区清除{
明确：两者皆有；
}
123
456
999

---

这必须使用div（或其他块级元素）完成。在所有浮动元素之后，在创建浮动的同一级别上清除浮动总是一种好的CSS形式。让我知道它是否适合你。干杯。

IE可能需要一个宽度……从技术上讲，当您浮动元素时，您应该指定一个宽度。

应用

显示：内联或
显示：内联块到内部div

我建议您指定浮动
的宽度。这样，您将对布局更加确定；而不是完全依赖浏览器进行渲染。同时，它也希望能帮助你想象你想要得到什么样的布局

从上面的例子来看，也许在
中使用浮动
可以实现您所需要的功能？或者，将段落对齐。
恐怕没有什么区别。恐怕没有什么区别。即使应用于
.main.internal div
？你应该尽量缩小导致你的问题的具体因素。尝试使用IE的开发工具来查看哪个元素是您的问题元素。。。查看
.internal
或
.internal div
是否为100%宽度。是的，已尝试同时应用于这两者。带有类
inner
的div是一个100%宽度的div（我现在还添加了图像以澄清问题）。@Amit:
display:inline
在内部
div
s中运行良好，在IE7和其他浏览器中。请参阅：很高兴您能找到答案。这将有助于避免问题，但问题是内容可能会发生变化（可能包括不同语言的文本，长度不同），因此在某些情况下，这样做会导致内容部分之间留有空白。您是否尝试过切换span元素的顺序？有时，由于某些原因，这有助于恢复内联。如果我找不到任何其他解决方案，固定宽度将是我的选择（我试图避免这种情况，因为内容宽度可能会改变）<代码>
元素不适合，因为实际布局比示例更复杂。