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

Question

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

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

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

   <

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

Answer 1

你需要给你的小部件一个 width 和 height 并使它们 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;
}

Live example here .