div+css image list layout (1)

When cutting pictures on the front end, we often encounter picture layout, which may be unfamiliar to beginners. Next, I will use a picture list with 3 rows and 3 columns as an example to introduce two commonly used picture cutting schemes:

• float layout

• display:inline-block layout

First let’s talk about the float layout method

float layout

It’s very simple. Generally I will use ul li layout

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

and then set a width for each li element and float it to the left. Here, each row needs to display 3 pictures, so the width of each picture can be calculated using a percentage: 100/3=33.3%.

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

The width of each img tag is set to 100%, occupying the entire width of li. In order to prevent the image from deforming, the height is adaptive

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

li img {
    width: 100%;
}

Okay, let's take a look at the effect.

Why is it different from what we thought? At this point the list is confusing. Don't worry, it's because the images come in different sizes. If the size of the images in the project is too different, it is recommended to set a fixed height on the parent element and set it beyond hiding. However, if the image sizes are not very different, it is recommended to set height: auto; to achieve highly adaptive purposes.

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

Hmm~ It’s almost the same as our needs

At this time, the product may require you to center the picture up and down

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

Yes Students may think of using margin-top instead of top. It should be noted here that the percentages of margin-top and margin-bottom are generally calculated based on the width of the container element rather than the height. The same is true for padding

Here, A basic image layout with three rows and three columns is basically completed.

But be careful, there is a hidden problem that novices may overlook: the parent container collapses after the child element is floated. Sometimes this feature will seriously affect our layout. Let's test it. Add a p element before and after the ul element

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

You can see that the .blue element is next to the .red element, and the ul element behaves as if it does not exist

This is because the element is separated from the document flow after floating. For the principle of floating, you can refer to w3school’s CSS floating and CSS floating attribute Float for details, which will not be repeated here. There are many ways to clear floats. Here we recommend adding: after pseudo-element to remove floats

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

Let’s see the effect again, the performance will be normal

display:inline -block layout

is similar to float layout, except that we have to replace float: left; with display: inline-block;

li {
    list-style: none;
    display: inline-block;
    width: 33.3%;
    /*三列图片排列*/
    height: 100px;
    /*当图片尺寸不一的时候，需要设置一个最大高度*/
    text-align: center;
    /*内容居中*/
    overflow: hidden;
    /*超出隐藏*/
}

to see the effect , a gap appeared, and it was squeezed into two lines. what happened? ~
Note that there will be gaps between inline-block elements. Please refer to Zhang Xinxu’s blog for details. Here we use the font-size: 0; method to clear the gaps between elements

ul {
    width: 100%;
    margin: 0 auto;
    font-size: 0;
}

In this way, the effect we want is completed. Isn’t it very simple?

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