html - 如何制作容器 'Fluid'

Question

我在这里找不到与我的问题相关的任何内容。我想知道如何让这些容器感觉“流畅”。我不知道我需要做什么才能使这些容器之间的距离相同。

What it currently looks like

What I want

你可以看到，我目前所拥有的是，有时它在自己的行上，有时它必须等到该行结束。

这是正文代码:

        <div class="container-fluid">
        <div class="page-header">
            <h1 style="color:white;"><b>Dashboard</b></h1>
        </div>
        <div class="col-sm-4"><iframe frameborder="0" style="width: 100%;" scrolling="no" onload="resizeIframe(this)" src="'.$link.'"></iframe></div>
        <div class="col-sm-4"><iframe frameborder="0" style="width: 100%;" scrolling="no" onload="resizeIframe(this)" src="'.$link.'"></iframe></div>
        <div class="col-sm-4"><iframe frameborder="0" style="width: 100%;" scrolling="no" onload="resizeIframe(this)" src="'.$link.'"></iframe></div>
    </div>

我的问题是:如何在不等待下一行填充的情况下使这个“流动”？

我希望这是有道理的。

Answer 1

Masonry 网格布局可以解决您的问题。访问以下链接并解决您的问题。如果您需要任何帮助，请告诉我。谢谢

Masonry Grid url