div+css Bildlistenlayout (2)

In diesem Artikel wird davon ausgegangen, dass Sie meinen letzten Artikel „P+CSS-Bildlistenlayout“ (1) bereits gelesen haben. Als nächstes werden wir ein komplexeres Bildlistenlayout implementieren. Nehmen Sie den folgenden Stil als Beispiel

Der Einfachheit halber liste ich nur display:inline-block-Layoutbeispiele auf.

Wie im vorherigen Artikel vorgestellt, besteht der erste Schritt darin, eine Breite für das übergeordnete Container-li-Element zu definieren.

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

Es gibt Lücken zwischen den Zeilen und Spalten der Bildliste Verwenden Sie einen Container p.content. Stellen Sie die Breite von .content auf 80 % des übergeordneten Containers ein und füllen Sie ihn auf etwa 20 Pixel aus.

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

Beachten Sie, dass jedes Bild einen weißen Hintergrund und einen weißen Rand hat Fügen Sie dem Bild eine weitere Schicht Behälter hinzu

.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>

Der Effekt ist wie folgt

Da die Größe unserer Bildmaterialien zu unterschiedlich ist, ist die Höhe erscheint ungleichmäßig zusammen. Wenn eine Ausrichtung erforderlich ist, können Sie „vertikal-align: unten“ im übergeordneten Container verwenden, der display: inline-block; definiert. Um die Höhe zu vereinheitlichen, müssen wir hier dem img-Tag eine weitere p-Ebene hinzufügen, um die Höhe zu begrenzen.

.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>

Der Effekt ist wie folgt

Beachten Sie, dass es im Allgemeinen nicht empfohlen wird, die Höhe und Breite direkt am img-Element festzulegen, denn wenn Die Bildgröße ist nicht festgelegt, es kommt zu einer Bildverformung. Sie können die Methode mit fester Breite und adaptiver Höhe (oder mit fester Höhe und adaptiver Breite) verwenden. Platzieren Sie dann einen Container auf der äußeren Ebene des img-Elements, legen Sie Breite und Höhe fest und setzen Sie ihn auf „overflow: versteckt;“.

Manchmal verlangt die Benutzeroberfläche, dass Sie genau den gleichen Abstand zwischen Zeilen und Spalten haben

Der Abstand zwischen Zeilen und Spalten ist hier unterschiedlich, warum~
Dann müssen Sie den Stil von .content ändern, die Breite nicht definieren, Polsterung verwenden, um den umgebenden Raum darzustellen, und das Attribut „box-sizing“ auf „border-box“ setzen.

Okay, perfekt~

Als nächstes fügen Sie den Titel hinzu

.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>

Der Effekt ist wie unten gezeigt

Mehr Div+CSS-Bildlistenlayout (2) Für verwandte Artikel achten Sie bitte auf die chinesische PHP-Website!