使用CSS float的問題：left，clear：both和display：inline-block in IE 8

Question

我試圖用CSS在頁面上佈局一段。這個Web應用程序需要在IE 8中專門工作。我嘗試了幾種不同的「float：left」組合方式。 「clear：both」和「display：inline-block」來嘗試實現我想要的佈局，但我顯然做錯了什麼。

我已經把紅色邊框放在所有DIV的周圍，以幫助我嘗試並找出這一點，如下圖所示。

前兩部分正確排列。這是我遇到的「地址」部分（本節以「Residence Address：」開頭）。

我想擁有以下各自的產品線：
Residence Address;
Residence Town，州/省，郵政編碼;
同住？
郵寄地址;
郵寄鎮，郵寄州/省，郵政編碼;

我也希望封閉的DIV只與我讀過的最寬的線一樣寬，可以用「display：inline-block」來實現。

由於某些原因，當我使用「display：inline-block」，並且將封閉的DIV左浮動時，其上有多個元素（即Residence Town，州/省，ZIP）的行不會保留在一個行 - 即使瀏覽器最大化，ZIP通常也會換行。

我希望我在這裏已經很清楚，但如果需要的話我可以進一步澄清。

謝謝。

Answer 1

這裏有一個辦法，雖然可能不是最乾淨的解決方案：

CSS

.newline {display:block;float:left;} 
.formput {float:left;} 
.clear {clear:both;} 

HTML

<form> 
<div class="newline"> 
    <div class="formput"> 
    Residence Address<br /> 
    <input type="text" /> 
    </div> 
    <div class="formput"> 
    State/Province<br /> 
    <select> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
    </select> 
    </div> 
    <div class="formput"> 
    Zip<br /> 
    <input type="text" /> 
    </div> 
    <div class="formput"> 
    Mailing Address<br /> 
    <input type="text" /> 
    </div> 
    <div class="formput"> 
    Mailing State/Province<br /> 
    <select> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
    </select> 
    </div> 
    <div class="formput"> 
    Mailing Zip<br /> 
    <input type="text" /> 
    </div> 
    <div class="clear" /> 
</div> 
<div class="newline"> 
    <div class="formput"> 
    Residence Town<br /> 
    <input type="text" /> 
    </div> 
</div> 
<div class="clear" /> 
<div class="newline"> 
    <div class="formput"> 
    Same as Residence? <input type="checkbox"/> 
    </div> 
</div> 
<div class="clear" /> 
<div class="newline"> 
    <div class="formput"> 
    Mailing Address<br /> 
    <input type="text"> 
    </div> 
</div> 
</form> 

我認爲包含明確的div：兩者都在訣竅中。