html 加载不规则线条,html – CSS：不规则网格布局

我正在尝试使用CSS创建不规则的网格布局.到目前为止,这是我的Jfiddle：

码：

HTML：

CSS：

.box { margin: 2px; float:left; }

#box1 { height: 86px; width: 80px; background-color: red;}

#box2 { height: 42px; width: 161px; background-color: green;}

#box3 { height: 42px; width: 80px; background-color: blue;}

#box4 { height: 86px; width: 80px; background-color: orange;}

#box5 { height: 129px; width: 80px; background-color: yellow;}

#box6 { height: 42px; width: 161px; background-color: brown;}

我要做的是将蓝色块向上移动(直接在红色块下面),这将允许棕色块向左和向上移动.下面是目前看起来与我正在尝试做的事情的图像.

希望这是足够的信息,我很乐意澄清您是否需要更多信息.我知道像素略有偏差,它大约是我正在寻找的四分之一大小所以我将所有像素定义除以4,这导致了一些我忽略的小数(并导致线条)不完美匹配).