在IE7中，浮动div扩展到100％

Question

我有以下简单的布局：

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>

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

然而，当在IE7中测试它（或者在兼容模式下实际上是IE8时，确切地说），主要的第一个div占用100％的宽度，因此第二个div被推到它下面：

可以找到一个示例here。

如何修复？

（修改 事实证明，这也发生在兼容模式下的IE9中）

（修改2：似乎仅在float:right时发生这种情况，而float:left则不会发生这种情况

Answer 1

将display: inline;或display: inline-block;应用于内部div。

w3.org - 9.2.2 Inline-level elements and inline boxes

Answer 2

IE可能需要一个宽度......从技术上讲，当你浮动一个元素时，你应该有一个宽度。

Answer 3

尝试添加样式为clear的div：

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（或其他一些块级元素）来完成。在所有浮动元素之后，在创建它们的同一级别上清除浮动的总是很好的CSS形式。请让我知道这对你有没有用。欢呼声。

Answer 4

我建议您指定浮动<div>的宽度。这样，你就会更加确定布局;而不是完全依赖于渲染在浏览器上。此外，它有望帮助您可视化您想要获得的布局。

仅从上面的示例中，在<span>中使用浮动<p>可能会实现您的需求吗？或者，恰好对齐一个段落。