兩個浮動元素之間的非浮動元素-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的寬度相同。

您可以清除非浮動對象的寬度並保留其余部分，或者為浮動對象指定寬度，然后清除非浮動對象的寬度。