0

有人可以解释一下为什么当我指定一个固定宽度时，这个片段中的四个 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>
4

1 回答 1

3

这里很简单，你给 .u 类提供 width:auto 所以它占用 100% 这就是为什么现在 .u 类的宽度超过 600px（即三个 div “uno” “dos” “tres” 的总和和第四个 div 的字符宽度“夸特罗”）。因此，它在第三个 div 旁边显示。

在将 widht .u 类 = 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>
于 2013-03-26T12:33:12.153 回答