javascript - 创建一个均匀分布且具有流动行为的仪表板

Question

我正在尝试为 Web 应用程序构建仪表板。要求此屏幕以下列方式响应客户端屏幕：

1. 仪表板应连续容纳 4 个小部件（相同大小）。小部件应均匀分布在屏幕上。

2. 当屏幕的最小尺寸不允许显示所有小部件（它们之间的空间最小）时，那些无法容纳的小部件应继续到下一行（流程）。

现在我看到这篇回答了第一个定义的帖子，但我找不到一种方法来用第二个想法强制它的流动行为。有谁知道如何做到这一点？

Answer 1

你需要给你的小部件一个widthandheight并制作它们display:inline-block：

HTML：

<div class="widget">One</div>
<div class="widget">Two</div>
<div class="widget">Three</div>
<div class="widget">Four</div>

CSS：

.widget {
    width: 100px;
    height: 100px;
    background-color: #ddd;
    margin: 2px;
    display: inline-block;
}

现场示例在这里。