为什么这个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>