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

この記事は、以前の記事「p+css 画像リスト レイアウト (1)」を読んでいることを前提としています。次に、より複雑な画像リスト レイアウトを実装してみましょう。以下のスタイルを例に挙げます

便宜上、display:inline-block レイアウトの例のみをリストします。

前の記事で紹介したように、最初のステップは親コンテナのli要素の幅を定義することです

li {
    list-style: none;
    display: inline-block;
    width: 33.3%;
    /*三列图片排列*/
    text-align: center;
    /*内容居中*/
    overflow: hidden;
    /*超出隐藏*/
    vertical-align: bottom;
    /*内容底部对齐*/
}

画像リストの行と列の間にはギャップがあります。コンテンツをラップするためにコンテナp.contentを使用します。 .content の幅を親コンテナの 80% に設定し、約 20px にパッドします

.content {
    width:80%;
    padding: 10px 0;
    overflow: hidden;
}
    
<li>
    <p class="content">
        ...
    </p>
</li>

各画像には白い背景と境界線があることに注意してください。画像にコンテナの別のレイヤーを追加できます

.img-wrap {
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
}
<li>
    <p class="content">
        <p class="img-wrap">
            <img src="1.jpg">
        </p>
    </p>
</li>

その効果は次のとおりですフォローします

弊社の写真素材はサイズの違いが大きいため、高さが不均一に見えます。位置合わせが必要な場合は、display: inline-block; を定義する親コンテナ内で;vertical-align:bottom を使用できます。ここで高さを統一するためにimgタグにpのレイヤーを追加して高さを制限する必要があります。

.img-box {
    height: 120px;
    overflow: hidden;
}
.img-box img {
    position: relative;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}
    
<li>
    <p class="content">
        <p class="img-wrap">
            <p class="img-box">
                <img src="1.jpg">
            </p>
        </p>
    </p>
</li>

効果は以下の通りです

画像サイズが固定されていないと画像が変形してしまうため、img要素に高さと幅を直接設定することは一般的に推奨されません。固定幅と適応高さ（または固定高と適応幅）の方法を採用できます。次に、img 要素の外層にコンテナを配置し、幅と高さを固定して、overflow: hidden; に設定します。

時々 UI では行と列の間隔が厳密に同じである必要があることがあります

ここでの行と列の間隔は異なります、なぜですか~
その場合は、定義ではなく .content のスタイルを変更する必要がありますwidth 、周囲の空白はパディングによって表され、box-sizing プロパティは border-box に設定されます。

OK、完璧〜

次にタイトルを追加します

.title{
    padding-top: 12px;
    font-size: 12px;
    color: #454545;
}
    
<li>
    <p class="content">
        <p class="img-wrap">
            <p class="img-box">
                <img src="1.jpg">
            </p>
        </p>
        <p class="title">图片标题</p>
    </p>
</li>

効果は次のようになります

div+css画像リストレイアウトの詳細については（2）関連記事については、注目してくださいPHPの中国語サイト！