2

広範なクロスを持つ HTML/CSS で、中央の画像の左右に 10 ピクセルの余白 (1280 ピクセルから 320 ピクセルまでレスポンシブ) を持つ 3 列の完全にレスポンシブな画像グリッドを作成する最良の方法は何でしょうか?ブラウザのサポート？

column-count などの CSS プロパティを使用できますか? これを達成するためのより良い方法はありますか？

4

1 に答える 1

8

あなたのフォーマット自体は非常に単純です...

デスクトップサイズでこの基本的なフォーマットを仮定しましょう...

|*****|*|*****|*|*****|
|     | |     | |     |
|     | |     | |     |
|*****|*|*****|*|*****|

では、3.8% のマージンを使用しましょう。

これらの余白に基づいて列の幅を計算する必要があります。3.8% = 7.6% で 2 つのマージンがあります。

100% - 7.6% = 92.4% / 3 列 = 30.8%

そう...

CSS:

.container { width: 100%; max-width: 1280px; min-width: 320px; margin: 0 auto; clear: both; }

.col-3 { float: left;  width: 30.8%; margin-right: 3.8%; }

.last { margin-right: 0; }

HTML:

<div class="container">
    <div class="col-3">
    </div>
    <div class="col-3">
    </div>
    <div class="col-3 last">
    </div>
</div>

メディア クエリを使用して、これをモバイル用の 1 列のレイアウトに調整する必要があります。

于 2013-03-21T15:09:37.920 に答える