Question

有人可以解释一下，为什么每当我指定固定宽度时，此片段中的四个div都会失效？它甚至会下降1 px的宽度。如果我将宽度保持为自动，则它会正确显示在同一行中。

<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（即三个div的总和“uno”“dos”“tres”和第四个div的字符宽度“cuatro “）。由于这一点，它在第三个div旁边。

在修复.u class = 1px或1px到638px（宽度包括“cuaro”的角色）这就是为什么这里第四个div在前三个div之下显示

我无法发布图像，否则我可以解释它。

用于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>

为什么这个div会下降？

1 个答案: