在CSS专家跳下我的喉咙之前，我确实知道如何按照自己的方式在CSS中排列块。我要寻找的是一种在调整浏览器窗口大小时调整块大小的方法（更重要的是，平板电脑从横向更改为纵向）
http://jsfiddle.net/UUN3x/2/
<div style="width: 700px; height: 220px;">
<div style="display: inline-block; background-color: red; height: 210px; width:210px;"> </div>
<div style="display: inline-block; position: absolute; margin-left: 10px; background-color: blue; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 120px; background-color: green; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 230px; background-color: black; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 340px; background-color: yellow; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 10px; margin-top: 110px; background-color: brown; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 120px; margin-top: 110px; background-color: aqua; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 230px; margin-top: 110px; background-color: orange; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 340px; margin-top: 110px; background-color: silver; height: 100px; width:100px;"></div>
</div>
<hr/>
<div style="width: 700px; height: 220px;">
<div style="display: inline-block; position: absolute; background-color:red; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 110px; background-color: blue; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 220px; background-color: green; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 330px; background-color: brown; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 440px; background-color: aqua; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 550px; background-color: orange; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-top: 110px; background-color:red; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 110px; margin-top: 110px; background-color: blue; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 220px; margin-top: 110px; background-color: green; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 330px; margin-top: 110px; background-color: brown; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 440px; margin-top: 110px; background-color: aqua; height: 100px; width:100px;"></div>
<div style="display: inline-block; position: absolute; margin-left: 550px; margin-top: 110px; background-color: orange; height: 100px; width:100px;"></div>
</div>
因此，当我调整浏览器大小时，块应移动良好并保留在浏览器窗口内。
我在这里使用绝对位置进行定位，这肯定是造成这种情况的原因。但是使用相对和固定，首先我无法使div很好地对齐：|
任何帮助/建议/方向表示赞赏：）
最佳答案