div+css画像リストレイアウト(1)-CSSチュートリアル-php.cn

div+css画像リストレイアウト(1)

高洛峰

リリース： 2017-02-18 14:36:17

オリジナル

2630 人が閲覧しました

フロントエンドで写真をカットするとき、初心者には馴染みのない写真レイアウトに遭遇することがよくあります。次に、例として 3 行 3 列の画像リストを使用して、一般的に使用される 2 つの画像切り取りソリューションを紹介します。とりわけ、float について話しましょう。レイアウト方法

float レイアウト div+css图片列表布局（一）

は非常に簡単です。通常、ul li レイアウト

    <ul>
        <li><img src="./images/1.jpg"></li>
        <li><img src="./images/2.jpg"></li>
        <li><img src="./images/3.jpg"></li>
        <li><img src="./images/4.jpg"></li>
        <li><img src="./images/5.jpg"></li>
        <li><img src="./images/6.jpg"></li>
        <li><img src="./images/7.jpg"></li>
        <li><img src="./images/8.jpg"></li>
        <li><img src="./images/9.jpg"></li>
    </ul>

ログイン後にコピー

を使用して、各 li 要素の幅を設定し、それを左にフローティングします。ここでは、各行に 3 つの画像を表示する必要があるため、各画像の幅はパーセンテージを使用して計算できます: 100/3=33.3%。

li {
    list-style: none;
    float: left;
    width: 33.3%;/*三列图片排列*/
}

ログイン後にコピー

各 img タグの幅は 100% に設定され、li の幅全体を占めます。画像の変形を防ぐために、高さは適応されます

li {
    list-style: none;
    float: left;
    width: 33.3%;/*三列图片排列*/
}

li img {
    width: 100%;
}

ログイン後にコピー

それでは、効果を見てみましょう。。

なぜ私たちが考えているものと違うのですか？この時点で、リストは混乱を招きます。画像にはさまざまなサイズがあるため、心配しないでください。プロジェクト内の画像のサイズが違いすぎる場合は、親要素に固定の高さを設定し、非表示の高さを超えるように設定することをお勧めします。ただし、画像サイズがそれほど変わらない場合は、高度な適応性を実現するために height: auto を設定することをお勧めします。

li {
    list-style: none;
    float: left;
    width: 33.3%;/*三列图片排列*/
    height: 100px;/*当图片尺寸不一的时候，设置一个高度*/
    overflow: hidden;/*超出隐藏*/
}

ログイン後にコピー

うーん、ほぼ私たちのニーズと同じです

現時点では、製品では画像を上下の中央に配置する必要がある場合があります

li img {
    position: relative;
    width: 100%;
    top: 50%;/*li高度的一半*/
    transform: translateY(-50%); /*再向上移动自身的50%*/
}

ログイン後にコピー

一部の生徒は、トップの代わりにマージントップを使用することを考えるかもしれません。ここで、margin-top と margin-bottom のパーセンテージは、通常、高さではなくコンテナ要素の幅に基づいて計算されることに注意してください。これはパディングにも当てはまります

div+css图片列表布局（一）

この時点では、基本的な 3 つが当てはまります。・基本的に行と３列の画像レイアウトが完成しました。

しかし、初心者が見落とす可能性のある隠れた問題があることに注意してください。子要素がフロートされた後に親コンテナーが折りたたまれる場合、この機能はレイアウトに重大な影響を及ぼします。テストしてみましょう。 ul 要素の前後に p 要素を追加します

.red{
    width: 100%;
    height: 30px;
    border: 1px solid red;
}
.blue{
    width: 100%;
    height: 30px;
    border: 1px solid blue;
}    
    
<p class="red"></p>
<ul>...</ul>
<p class="blue"></p>

ログイン後にコピー

.blue 要素が .red 要素の隣にあり、ul 要素が存在しないかのように動作することがわかります

div+css图片列表布局（一）

フローティングの原理については、w3school の CSS フローティングおよび CSS フローティング属性 Float を参照してください。ここでは繰り返しません。 float をクリアする方法はたくさんあります。ここでは、float を削除する疑似要素の後に追加することをお勧めします

パフォーマンスを見てみましょう div+css图片列表布局（一）

display: inline-block レイアウト

も同様です。 float レイアウトに変更しますが、 float: left; を display: inline-block; に置き換える必要があります

div+css图片列表布局（一）

隙間があり、2 行に圧縮されている効果を見てみましょう。どうしたの？ ~

インラインブロック要素の間にギャップがあることに注意してください。詳細については、Zhang Xinxu のブログを参照してください。ここでは、 font-size: 0; メソッドを使用して要素間の隙間をクリアします

.clearfix:after{
    position: relative;
    content: '';
    display: block;
    width: 0;
    height: 0;
    visibility: hidden;
    clear: both;
}

<p class="red"></p>
<ul class="clearfix">...</ul>
<p class="blue"></p>

ログイン後にコピー

このようにして、希望する効果が完成します。とてもシンプルですね div+css图片列表布局（一）