Html 圈出相邻的DIV元素

我正在为学校作业做一个数据可视化。我有很多不同大小的圆形div元素。有没有可能让他们挨在一起？现在我用float：左；但是div元素在一行上，如果一行较大，则会有一个空白

网页：

1圈HTML示例：

<div class="circle" style="height: 200px; width: 200px; border: 15px solid rgb(255, 141, 0); background-image: url('http://zapp.trakt.us/images/episodes/9635-4-11.jpg?17'); background-size: cover;">
    <div class="circle" style="height: 100%; background-color:rgba(255, 146, 0, 0.4)">
        <h2 style="font-size: 25px">New Girl</h2>
    </div>
</div>

---

使用d3.js的气泡图最适合您的需要

下面是一段有效的代码片段：

var数据={
“名称”：“动画”，
“儿童”：[
{“name”：“Easing”，“size”：17010}，
{“name”：“FunctionSequence”，“size”：5842}，
{
“名称”：“插入”，
“儿童”：[
{“name”：“ArrayInterpolator”，“size”：1983}，
{“name”：“ColorInterpolator”，“size”：2047}，
{“name”：“DateInterpolator”，“size”：1375}，
{“name”：“Interpolator”，“size”：8746}，
{“name”：“MatrixInterpolator”，“size”：2202}，
{“名称”：“NumberInterpolator”，“大小”：1382}，
{“name”：“ObjectInterpolator”，“size”：1629}，
{“name”：“PointInterpolator”，“size”：1675}，
{“名称”：“矩形插值器”，“大小”：2042}
]
},
{“name”：“ISchedulable”，“size”：1041}，
{“名称”：“平行”，“大小”：5176}，
{“名称”：“暂停”，“大小”：449}，
{“名称”：“调度程序”，“大小”：5593}，
{“名称”：“序列”，“大小”：5534}，
{“name”：“Transition”，“size”：9201}，
{“name”：“Transitioner”，“size”：19975}，
{“name”：“TransitionEvent”，“size”：1116}，
{“name”：“Tween”，“size”：6006}
]
};
变量直径=960，
格式=d3。格式（“，d”），
颜色=d3.scale.category20c（）；
var bubble=d3.layout.pack（）
.sort（空）
.尺寸（[直径，直径]）
.填充（1.5）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，直径）
.attr（“高度”，直径）
.attr（“类”、“气泡”）；
//d3.json（“flare.json”，函数（错误，根）{
var node=svg.selectAll（“.node”）
.数据（气泡.节点（类（数据））
.filter（函数（d）{return！d.children；}））
.enter（）.append（“g”）
.attr（“类”、“节点”）
.attr（“transform”，函数（d）{return“translate”（“+d.x+”，“+d.y+”）”）；}）；
node.append（“标题”）
.text（函数（d）{返回d.className+“：“+格式（d.value）；}）；
node.append（“圆”）
.attr（“r”，函数（d）{返回d.r；}）
.style（“fill”，函数（d）{返回颜色（d.packageName）；}）；
node.append（“文本”）
.attr（“dy”，“.3em”）
.style（“文本锚定”、“中间”）
.text（函数（d）{返回d.className.substring（0，d.r/3）；}）；
//});
//返回包含根下所有叶节点的展开层次结构。
函数类（数据）{
var类=[]；
函数递归（名称、节点）{
if（node.children）node.children.forEach（function（child）{recurse（node.name，child）；}）；
push（{packageName:name，className:node.name，value:node.size}）；
}
递归（空，数据）；
返回{子类：类}；
}
d3.选择（self.frameElement）.样式（“高度”，直径+“px”）
文本{
字体：10px无衬线；
}
更改以下规则

h2 {
    color: #FFF;
    text-align: center;
    vertical-align: middle;
    transform: translateY(-50%);
    margin-top: 50%;
    word-wrap: break-word;
}
.circle {
    border-radius: 100%;
    display: inline-block;
    vertical-align: middle;
}

此外，要将
.circles
水平居中，请将所有
.circles
包装在
#容器中，并为其指定以下规则

#container {
    width: 95%;
    margin: 0px auto;
    text-align: center;
}

结果如下

请不要链接到您的网页，因为它可能会在将来被删除，这会导致链接无效：）另外，为什么您的标题
显示：表格单元格
？除了block、inline和inline block以外的任何东西都只能在真正需要时使用，而不是作为快速修复：）@Ruben请在下面找到答案，并将其中一个标记为已接受，以解决您的问题。@Martijn很抱歉，我想用图片替换它，但我首先需要10的声誉。当我有这些东西时，我会把它换掉。这并不能回答这个问题。若要评论或要求作者澄清，请在其帖子下方留下评论。虽然此链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，只有链接的答案可能会无效。@Zachsauier感谢您指出。用代码段中的一个示例和相关内容更新了我的答案。@jproffitt感谢您指出。在片段和相关内容中更新了我的答案。这是一个很好的未来解决方案，但现在我不使用JSON文件来加载信息。很棒的解决方案，但是在Mac上Safari的标题不在中间，Chrome工作得很好。我希望有一个简单的解决办法。
#container {
    width: 95%;
    margin: 0px auto;
    text-align: center;
}