javascript - 均等に分散され、フロー動作を備えたダッシュボードを作成する

Question

Web アプリケーションのダッシュボードを構築しようとしています。この画面の要件は、次の方法でクライアント画面に応答することです。

ダッシュボードには、4 つのウィジェット (同じサイズ) が一列に並んでいる必要があります。ウィジェットは画面全体に均等に配置する必要があります。
画面の最小サイズではすべてのウィジェットを表示できない場合 (ウィジェット間のスペースを最小限に抑える)、収まらないウィジェットは次の行 (フロー) に進む必要があります。

今、私は最初の定義に答えるこの投稿を見ましたが、2番目のアイデアでフロー動作を強制する方法を見つけることができませんでした. 誰もそれがどのように行われるかの手がかりを持っていますか?

score 0 · Accepted Answer

ウィジェットにwidthandを指定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;
}

1 に答える 1