爲什麼這個div正在下降？

Question

有人能解釋一下，爲什麼每當我指定它爲固定寬度時，此代碼片段中的四個div都會下降？它甚至下降了1px的寬度。如果我保持寬度在自動它正確出現在同一行。

<style> 
    .au { 
    float:left; 
    width:200px; 
    } 
    .u { 
    width:auto; //change this to a fixed size like 1px 
    } 
</style> 
<div class="au">uno</div> 
<div class="au">dos</div> 
<div class="au">tres</div> 
<div class="u">cuatro</div> 
<div>cinco</div> 

Answer 1

其簡單 在這裏你給寬度：汽車到.U類，以便其採取100％這就是爲什麼現在.U類有寬度超過600px的（即，三個格「UNO」，「DOS」「特雷斯的總和「和第四個div」cuatro「charcter的寬度）。由於這是它旁邊的第三個分區。

在widht .U類= 1像素1像素或固定到638px（寬度包括「cuaro」 charctor），所以這就是爲什麼在這裏下面前三的div

我不能發佈圖像第四格displying否則我可以通過將其解釋。

用於輸出使用下面的HTML和CSS代碼，並在瀏覽器中看到我希望你能很容易地理解。

FIRST PHASE 
.au { 
float:left; 
width:200px; 
} 
.u { 
    width:100px; 
} 

<div class="au">uno</div> 
<div class="au">dos</div> 
<div class="au" style="border:red solid 1px;">tres</div> 
<div class="u" style="border:green solid 1px;">cuatro</div> 
<div>cinco</div> 




SECOND PHASE 
.au { 
float:left; 
width:200px; 
} 
.u { 
    width:639px; 
} 


<div class="au">uno</div> 
<div class="au">dos</div> 
<div class="au" style="border:red solid 1px;">tres</div> 
<div class="u" style="border:green solid 1px;">cuatro</div> 
<div>cinco</div>