如何使用html css实现无组织的气泡布局？

我需要像这样的气泡布局：

我已完成此阶段的工作-

由于我对CSS/Web设计不是很熟练，所以我只能考虑使用table tr td。 但我可以看到，我需要气泡彼此靠近。如果我选择桌子结构，我认为它不会起作用

请建议一些设计结构，或者我应该选择其他东西，SVG，等等

---

谢谢

您还可以尝试使用HTML5画布功能。您可以了解有关画布的更多信息

请访问

HTML

<canvas width="400" height="400" id="circles"></canvas>

解释{x:50，y:50，r:25，c:#78BA00}，

• x:x轴位置（以像素为单位）
• y：y轴位置（以像素为单位）
• r：以像素为单位的半径
• c:用十六进制表示颜色

借助上述参数，您可以根据需要对圆圈进行定位、大小和颜色设置。

最重要的是，此解决方案将独立于服务器端脚本。

我希望这对您有所帮助：）我对此很感兴趣。 （也可以通过此查看一些精彩的阅读/观看）

演示：

用途：

代码：

<style>
    .circle
    {
    border-radius:50%;
    text-align:center;
    background:#efdeee;
    display:inline-block;
    margin:-5px;
    }
</style>
<div id="container">
    <?php
    $xx = 1;
    while ($xx <= 200) {
        $thisx = rand(10,99);
        echo '<div class="item circle" style="width:'.$thisx.'px;height:'.$thisx.'px;">&nbsp;</div>';
        $xx++;
    }
    ?>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/packery/1.4.1/packery.pkgd.min.js"></script>
<script>
    var container = document.querySelector('#container');
    var pckry = new Packery( container, {
      // options
      itemSelector: '.item',
      gutter: 10
    });
</script>

圆圈
{
边界半径：50%；
文本对齐：居中；
背景:#efdeee；
显示：内联块；
保证金：-5px；
}
var container=document.querySelector（“#container”）；
var pckry=新包装机（容器、{
//选择权
itemSelector:“.item”，
排水沟：10
});

您好，谢谢您的回复。。但关键是我需要很多气泡，就像在图像中一样。为了达到这个目的，你需要编写CSS来生成圆圈，并编写jQuery来将这些圆圈与动态参数相乘。我已经更新了我的答案。在HTML5画布的帮助下，您也可以获得所需的圆圈。这样，您可以更好地控制每个圆的位置+大小+颜色。调整浏览器窗口的大小以获得更多乐趣：）

<style>
    .circle
    {
    border-radius:50%;
    text-align:center;
    background:#efdeee;
    display:inline-block;
    margin:-5px;
    }
</style>
<div id="container">
    <?php
    $xx = 1;
    while ($xx <= 200) {
        $thisx = rand(10,99);
        echo '<div class="item circle" style="width:'.$thisx.'px;height:'.$thisx.'px;">&nbsp;</div>';
        $xx++;
    }
    ?>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/packery/1.4.1/packery.pkgd.min.js"></script>
<script>
    var container = document.querySelector('#container');
    var pckry = new Packery( container, {
      // options
      itemSelector: '.item',
      gutter: 10
    });
</script>