フローティング DIV に問題があります。次のように 4 つの DIV を配置したいと思います。
私の現在のコード:
<div style="width: 600px; margin: 0 auto;">
<form>
<div style="float: left; clear: left; width: 200px; height: 200px; background-color: lightpink;">div 1</div>
<div style="float: right; clear: right; width: 200px; height: 300px; background-color: lightgreen;">div 2</div>
<div style="float: right; clear: right; width: 100px; height: 200px; background-color: lightgrey;">div 4</div>
</form>
<form>
<div style="float: left; clear: left; width: 200px; height: 100px; background-color: lightblue;">div 3</div>
</form>
</div>
次のように配置します。
JSFiddle: http://jsfiddle.net/cLcwU/1/
ご覧のとおり、div 3 は div 4 より高くなりません。
質問 #1: なぜこれが起こっているのですか?
質問 2: div の 1、2、および 4 は 1 つのフォーム内にあり、div 3 は別のフォーム内にあります。したがって、div 4 を右にフロートする前に div 3 を左にフロートすることはできません (何らかの理由で問題が修正されます)。これを希望どおりに機能させるにはどうすればよいですか?
編集: 右下の div 2 は div 4 であるはずです。申し訳ありません。