div+css image list layout (2)

This article assumes that you have read my last article p+css image list layout (1). Next, let’s implement a more complex image list layout. Take the following style as an example

#For convenience, I only list display:inline-block layout examples.

As introduced in the previous article, the first step is to define a width for the parent container li element

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

There are gaps between the rows and columns of the image list, we use a container p.content wraps the content, and sets the width of .content to 80% of the parent container, and the top and bottom padding (paddind) is about 20px

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

Notice that each picture has a white background and border, we can give The picture is then covered with a layer of containers

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

The effect is as follows

Because the size of our picture materials is too different, the height appears uneven. If alignment is required, you can use; vertical-align: bottom in the parent container that defines display: inline-block;. Here, in order to unify the height, we need to add another layer of p to the img tag to limit the height.

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

The effect is as follows

Note that it is generally not recommended to directly set the height and width on the img element, because if the image size is not fixed, it will cause Deformation. You can adopt the method of fixed width and adaptive height (or fixed height and adaptive width). Then put a container on the outer layer of the img element, fix the width and height, and set it to overflow: hidden;.

Sometimes UI will require you that the spacing between rows and columns must be strictly the same

The spacing between rows and columns here is different, why~
Then you need to modify the style of .content, do not define the width, use padding to represent the surrounding space, and set the box-sizing attribute to border-box.

Okay, perfect~

Next add the title to

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

The effect is as shown

More div+css image list layout (2) For related articles, please pay attention to the PHP Chinese website!