1

ブラウザのビューポートの 100% にまたがる、流動的で柔軟な「タイル」を Web サイト用に作成しようとしています。ただし、次のタイルが収まらない場合にすべての空白を削除するために、必要に応じて少し拡大したいと思います。

最小幅と最小高さが 200px で、「display: inline-block」に設定された通常の div タグを使用すると、ほとんどの場合うまくいきます。ブラウザー ウィンドウを展開すると、ボックスが上に移動し、空きがある場合はボックスが上に移動します。

私の問題は、次の div の余地がなく、右側に空白がある場合です。その代わりに、各 div を「スケールアップ」して、線の幅全体を修正したいと考えています。

そのため、ブラウザーが 675px に設定されている場合、200px に 3 つの div ではなく、225px に 3 つの div があります。しかし、ブラウザのサイズを 800px に変更すると、200px の 4 つの div ができます。

わかりにくかったらすいません。基本的に、私はhttp://pulse.meが記事を表示する方法を模倣しようとしています。

可能であれば純粋なCSSでこれを行いたいのですが、少なくともウィンドウのサイズ変更にはJavaScriptが必要になると思います。何かご意見は？

4

1 に答える 1

4

純粋な CSS アプローチの場合、メディア クエリをパーセンテージ幅と組み合わせて使用​​できます。

.tile {
    /* 4 tiles per row */
    width: 25%;
}

@media (max-width: 500px) {
    .tile {
        /* 3 tiles per row */
        width: 33.33333333332%
    }
}

@media (max-width: 300px) {
    .tile {
        /* 2 tiles per row */
        width: 50%
    }
}

これを示すフィドルは次のとおりです。http://jsfiddle.net/bDBMP/1/

于 2013-03-24T05:37:54.310 に答える