css - 浮动 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>

这是一个屏幕截图：

然而问题是我希望它看起来更像这样（第三个坏人堆叠在 1 下）：

Answer 1

我认为不需要浮动任何 DIV。您所追求的是内联块元素的默认行为。

display: inline-block;

我想你想要这样的东西：http: //jsfiddle.net/4Rq6n/