リ浮き問題について！ Solve_html/css_WEB-ITnose

まず、上の画像、

li に画像を追加し、最初の float を設定すると、上記のようになります、、、、が、、
li に幅と高さを追加すると、上記のようになります。これは解決してください?

ディスカッション (解決策) への返信

2 つの列を実装したい場合、ul は 2 li の幅を設定し、すべての li は浮動小数点になります

li はブロックラベルであり、1 つを占めることを意味しますline 、最初の行には float:left を使用しました。これは左に浮動して右の位置に移動します。2 番目の li は残りのスペースを占めます。2 番目の li は浮動せず、1 行を占有するだけです。新しい行を開始します。 2 番目のケース: li は浮動小数点数ではなく、それぞれが 1 行を占めるため、すべてをラップする必要があります。

float が設定されると、通常の流れから外れ、2 番目の li 要素が上に移動します

li 幅が設定されると、#one は次の li と同じ幅を持つため、左端に相当します2 番目の li ブロックレベル要素の一部は #one によって占有されており、最初の行の幅はいっぱいで、その内容は幅が設定されていない場合にのみ折り返されて 2 行目に表示されます。 #one の幅は a 文字を含む幅のみで、2 番目の li の幅はデフォルトで 100% になります UL

の幅は float が設定されてから通常の流れから外れ、2 番目の li 要素が移動しますup

li の幅が設定された後、#one は次の li の幅と同じであるため、#one である 2 番目の li ブロックレベル要素の左端の要素が占有されているのと等価です。最初の行はいっぱいで、幅が設定されていない場合、その内容は 2 行目にのみ折り返されて表示されます。#one の幅は文字を含む幅のみであり、2 行目の幅はその幅になります。 li はデフォルトです。その場合、幅は 100% UL になります

最初のものは理解できますが、幅を設定した後の効果が異なる理由がまだわかりません (#one が次の li と同じ幅を持っているため) 、これは 2 番目のものと同等です) li ブロック レベル要素の左端の部分は #one によって占められています) この文が理解できないので、答えてください。ありがとうございます

float を設定した後、通常の流れから外れ、2 番目の li 要素が上に移動します

li が幅を設定した後、#one は次の li と同じ幅を持つため、 #one である 2 番目の li ブロックレベル要素の左端の要素が占有されている、つまり、最初の行の幅がいっぱいで、その幅が満たされている場合にのみ、その内容が折り返されて 2 行目に表示されることに相当します。は設定されておらず、#one の幅は a 文字を含む幅のみであり、2 番目の li の幅はデフォルトです。その場合、幅は 100% UL になります

最初のものは理解していますが、まだ理解できません。幅を設定した後、その効果が異なる理由はわかりません (#one は後続の li と同じ幅を持ち、2 番目の li と同等であるため) li ブロックレベル要素の左端の部分は #one によって占有されています)この文が理解できないので答えてください！ありがとうございます

ブラウザーがレンダリングすると、フローティング要素は通常のフロー要素に重ねられます。2 番目の li 要素の幅はわずか 120 ピクセルで、高さは適応されます。 #one の幅も 120px で左端にフローティングすると、2 番目の li 要素の内容は #one の右端近くに配置されます。十分なスペースがない場合は下に移動するしかありません。 2 番目の li 要素の幅を 120px に設定すると、理解できるかもしれません

多くの場合、そうすること自体に互換性の問題があるため、なぜこれが当てはまるかについてあまり心配する必要はありません。画像の回り込みも、異なるブラウザで表示される効果に一貫性がありません。唯一の方法は、同じ行に表示されるようなレイアウトを避けることです。多くの人は、最初に float を設定し、2 番目の要素を絞るという解決策を使用します。ただし、この方法では、特定の条件が満たされた場合に不可解な空白のギャップが発生します。これを解決する方法は一律にのみです。

もし本当になぜこれが起こるのかを知りたい場合は、主要なブラウザの基本的なレンダリングメカニズムから理解する必要があると思います。それを理解していても、同様のレイアウトを避けることになります
。