css - float CSS の問題 - Windows 8 のようなタイル

Question

これが私のコードです：

<div style="background-color:red;border:2px solid red;height:100px;width:500px;float:left;margin-right:20px;margin-bottom:20px;"><center style="font-size:100px;">1</CENTER></div><div style="background-color:red;border:2px solid red;height:200px;width:500px;float:left;margin-right:20px;margin-bottom:20px;"><center style="font-size:100px;">2</CENTER></div>
<div style="background-color:red;border:2px solid red;height:100px;width:500px;float:left;margin-right:20px;margin-bottom:20px;position:relative;top:-100px;"><center style="font-size:100px;">3</CENTER></div>

ここにスクリーンがあります：

それでも問題は、私もこのように見えるようにしたいということです (3 番目の悪者は 1 の下に積み上げられています)。

Answer 1

DIV をフロートする必要はないと思います。あなたが求めているのは、インラインブロック要素のデフォルトの動作です。

display: inline-block;

次のようなものが欲しいと思います：http://jsfiddle.net/4Rq6n/