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

Creating a dashboard evenly distributed and with flow behavior

本文关键字：仪表板 分布 一个 创建      更新时间：2023-09-26

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

  1. 仪表板应在一行中容纳4个小部件（相同大小）。小部件应该均匀地分布在屏幕上。

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

现在我看到了这篇文章，它回答了第一个定义，但我找不到用第二个想法来强制执行流行为的方法。有人知道怎么做吗？

您需要给小部件一个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;
}

这里是一个活生生的例子。

相关文章：