創建均勻分佈且具有流行爲的儀表板

Question

我正在嘗試爲Web應用程序構建儀表板。這些要求適用於該屏幕爲響應客戶端的屏幕以下列方式：

1. 儀表板應連續舉辦4級的小部件（大小相同）。小部件應均勻分佈在屏幕上。

2. 當屏幕的最小尺寸不允許顯示所有小部件（它們之間的空間最小）時，那些不適合的小部件應該繼續到下一行（流程）。

現在我看到這個post，回答的第一個定義，但我無法找到一個方法來強制流動行爲上它與第二個想法。有沒有人知道如何做到這一點？

Answer 1

你需要給你的widget 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。