CSS 画像の応答性 + 垂直方向と水平方向のセンタリング 2_html/css_WEB-ITnose

前の記事では、画像グループの最大幅の制限と、レスポンシブ + 画像の垂直方向と水平方向の中央揃えについて説明しました。

実際、この記事と組み合わせて、フレックスボックスの justify-content のスペースとスペースの周囲をシミュレートし、画像グループの最大幅を制限しないと、ブラウザ ウィンドウが広い場合でも同じであることがわかります。フレックスボックスの space- と同じ効果が表示されます。つまり、行の最初の画像が一番左にあり、最後の画像が右にあり、画像間の間隔は同じです。このとき、画像間の左右の余白をパーセンテージで設定することは、画像間の間隔の最小値を設定することと同じであり、間隔が最小値に達すると、画像はウィンドウの次の行にジャンプします。より小さいです。ブラウザ ウィンドウの幅が十分でない場合、前の記事と同じ影響が発生します。

効果を見てください

実装

1. パッケージ画像のliを与えます

rreee

幅を設定して、ウィンドウが広くない場合の列数を調整します。たとえば、width: 22% では列数が 4 に変更されます。また、2 つの列の間に大きな空白ができるため、列数を 2 に設定しないでください。これは text-align の欠陥です。 :シミュレーションを調整します。

2. 画像グループの親要素に ul class='justify' を追加します

    li{        list-style-type: none;        display: inline-block;        max-width: 200px;        width: 29%;        border:1px solid red;        position: relative;        margin: 5px 1%;    }

3.

を追加します

    @media (-webkit-min-device-pixel-ratio:0) {    .justify:after {            content: "";            display: inline-block;            width: 100%;        }    }    .justify {        text-align: justify;        text-justify: inter-ideograph;        *zoom: 1;         -moz-text-align-last: justify;        -webkit-text-align-last: justify;        text-align-last: justify;    }

完了！それはとても簡単です！サンプルのダウンロード