0

固定幅を指定するたびに、このスニペットの 4 つの 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

ここでは単純に width:auto を .u クラスに指定するので、100% を取るため、.u クラスの幅が 600px を超えています (つまり、3 つの div "uno" "dos" "tres" の合計と 4 番目の div の文字の幅) 「クアトロ」）。このため、3 番目の div の横に表示されます。

widht .u class = 1px または 1px から 638px ("cuaro" の文字を含む幅) を固定すると、最初の 3 つの div の下に 4 番目の 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 に答える