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

我认为没有必要 float 任何 DIV。您所追求的是内联 block 元素的默认行为。

display: inline-block;

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