有人可以帮我完成this link中指定的复杂的图块布局吗？
我曾尝试对部件使用float：left，但红色块始终位于＃2以下。我应该能够将小部件动态添加到黑色仪表板。我可以使用html5，css3和jquery。
不仅有2列。如果仪表板具有3、4等的可用宽度空间，则它应该在那里。大小不一的小部件数量为一到无限。如果没有可用的宽度空间，则新的小部件应向下浮动并完全填充可用空间。
标记失败：
<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="Robots" content="noindex, nofollow"/>
<style type="text/css">
#dashboard {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background: #000;
width: 320px;
float: left;
}
div.widget {
margin: 10px;
border: 1px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
padding: 5px 10px 10px 10px;
float: left;
}
</style>
</head>
<body>
<div id="dashboard">
<div class="widget" style="background: #fff; width: 120px; height: 150px">
<h3>#1</h3>
</div>
<div class="widget" style="background: #fff; width: 120px; height: 250px">
<h3>#2</h3>
</div>
<div class="widget" style="background: red; width: 90px; height: 50px">
<h3>#3</h3>
</div>
<div class="widget" style="background: green; width: 90px; height: 50px">
<h3>#4</h3>
</div>
<div class="widget" style="background: blue; width: 90px; height: 50px">
<h3>#5</h3>
</div>
</div>
</body>
</body>
其他模型：img191.imageshack.us/img191/2139/picture2fdi.png
使2个容器div都浮动：向左移动
然后浮动：将所有内容留在这些div中。
使用css进行两列布局的最简单方法。
<div id="leftcol">
your code...
</div>
<div id="rightcol">
your code...
</div>
css：
leftcol,rightcol{float:left;width:(whatever);}
CSS：
body {
background: #000;
}
.left {
float: left;
}
.right {
float: left;
}
.widget {
margin: 10px;
margin-right: auto;
margin-left: auto;
width: 200px;
}
.content {
margin: 10px;
background: #fff;
width: 300px;
}
#one {
height: 300px;
}
#two {
height: 400px;
}
#red {
background: #f00;
height: 100px;
}
#green {
background: #0f0;
height: 100px;
}
#blue {
background: #00f;
height: 100px;
}
HTML：
<div class="left">
<div class="content" id="one"></div>
<div class="widget" id="red"></div>
<div class="widget" id="green"></div>
</div>
<div class="right">
<div class="content" id="two"></div>
<div class="widget" id="blue"></div>
</div>
如何使用BlueprintCSS？ http://www.blueprintcss.org/
[您是否尝试过仅包含一个包装div，将其归类为“ widget”，然后向左浮动？我不确定我知道＃1和＃2下面的彩色框是什么，但是如果它们与它们正上方的项目相关，我不认为这有多么困难：
<div class="widget">
<div id="widget1">stuff</div>
<div id="widget1_1">stuff related to 1</div>
</div>
<div class="widget">
<div id="widget2">stuff</div>
<div id="widget2_1">stuff related to 2</div>
</div>
CSS：
.widget {float: left; overflow: auto;}
.widget div {float: left;}
您没有想要的CSS解决方案。我想我已经看到了JS解决方案，但是现在我无法动弹。