两个浮动元素之间的非浮动元素-IE7

Question

这是我的代码（真正简化了）：

<div style="float: left;">
    <div style="float: left;">
        <!-- Some content -->
    </div>
    <div style="float: right;">
        <!-- Some content -->
    </div>
    <form method="post" style="display: block; width: 100%; position: relative;">
        <fieldset>
            <!-- Some content -->
        </fieldset>
    </form>
</div>

在IE8，FF3.6 / 4，Chrome和Opera中，它看起来不错。 Div的宽度没有指定，我希望表格填充剩余的空间。 但是在IE7中，非浮点形式的价格会降低。 我该怎么办？

您可以在此网站上看到此信息 （顶部栏）

Answer 1

是否有您不想指定宽度的原因？ 看来他们的标题比必要的要冗长得多。 像下面这样的事情会为您完成同样的事情吗？

<div style="float: left; width:100%;">
<div style=" display:block;float: left; position:relative; top:0; left:0; width:20%">
    <p>LEFT SIDE</p>
</div>
<div style="display: block; position: relative; float:left; top:0; left:0; width:60%;">
        <form method="post">
    <fieldset>
        form stuff
    </fieldset>
</form>
</div>
<div style="display: block; float: left; position:relative; top:0; left:0; width:20%;">
    <p>RIGHT SIDE</p>
</div>

这在IE中应该可以使用，但是CSS可能需要进行调整以补偿较旧的IE处理框模型的方式。

Answer 2

当您指定表单的宽度为100％时，它将占据父级的整个宽度，在这种情况下，父级与浮动div的宽度相同。

您可以清除非浮动对象的宽度并保留其余部分，或者为浮动对象指定宽度，然后清除非浮动对象的宽度。