html - Div は 2 列目にジャンプしますか? なんで？

Question

1. このページを開きます: http://jsfiddle.net/dwDZx/6/
2. 赤くなるまでリサイズ

3. ブラウザを小さくし続ける

   <div id="container">
   <div id="div1"><div class="content">one</div></div>
   <div id="div2"><div class="content">two</div></div>
   

   </p>

div2 がサイズ変更ではなく行を下にジャンプするのはなぜですか? どうすればこれを解決できますか?

Answer 1

小さい画面サイズの余白を追加しています。余白をパーセンテージに設定し、小さい画面サイズの幅のパーセンテージを差し引きます。

そのため、余白をピクセル単位で設定しないでください。ただし、パーセンテージで。

Answer 2

div が赤の場合、div が従おうとする 2 つの関連する制約があります:width: 48%とmargin-right: 10px. div がサイズ変更ではなく行を下にジャンプしている場合は、その行に両方の div に十分なスペースがないことを意味します。使用可能なスペースよりも多くのスペースを占有しようとしています。したがって、2 番目の div はそれ自体の新しい行を作成するため、両方の div を必要なだけ広くすることができます。それでは、数字を見て、div があまりにも多くのスペースを要求している理由を見てみましょう。

ページと各 div の幅を動的に表示するhttp://jsfiddle.net/roryokane/kZZCh/をロードし、結果パネルの幅を正確に 400px にして、バグ自体が表示されるようにします。2 つの div の幅は 192px になりました。これは理にかなっています – 400px の 48% は 192px です。幅には、div ごとに 10 ピクセルのマージンは含まれません。したがって、div が要求する合計幅は (192+10)*2 = (202)*2 = 404 ピクセルであり、割り当てられた 400px を超えています。div が同じ行にとどまるのではなく、折り返しているのも不思議ではありません。

では、これをどのように解決しますか？ダニーの答えmargin-rightは、値をピクセル値からパーセント値に変更することを提案しています。しかし、それは可能な解決策の 1 つにすぎません。最適な解を見つける方法は、 と で特定の 2 つの数値を選択した理由width: 48%とmargin-right: 10px、どちらの数値を維持することがより重要かによって異なります。幅を のままにしておく必要がある場合は48%、固定マージン幅を維持するか、柔軟なマージン幅に切り替えるかを検討してください。それでも固定幅が必要な場合は、を使用してmargin-right: 8pxください。柔軟な幅が必要な場合は、margin-right: 2%（ダニーのソリューション）を使用してください。一方、右余白の幅を のままにしておく必要がある場合は10px、幅に を使用しますwidth: 47.5%。これらの値はすべて、ページの幅が 400 ピクセルしかない場合でも、div が同じ行にとどまるようにします。