div + css layout picture list (a)

Cut the tip when the map will always be the picture layout, beginners may be unfamiliar. The next picture I will list three rows and three columns to cut Liezi describes two common chart options:

float layout
display: inline-block layout

First, in terms of float layout method

float layout

Very simple, I usually 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>

Li element is then given to each of a width and left floating. Where each row to display three images, then the width of each image may be calculated using the percentage: 100/3 = 33.3%.

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

Img width of each tag is set to 100%, occupy the entire width of li, in order to prevent deformation of the images, highly adaptive

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

li img {
    width: 100%;
}

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

And how we think differently? This time the list is confusing. Do not worry, this is because different picture size. If the size difference in the picture of the project is too large, it is recommended given the death of one parent element height, and set beyond the hide. But if the picture is not very different sizes, it is recommended to set height: auto; in order to achieve the purpose of highly adaptive.

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

Ah ~ and our needs almost

This time the product may require you to picture up and down the middle

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

Some students may think of using margin-top, rather than the top. It should be note, the percentage margin-top and margin-bottom, generally the width of the container in the height of the element, rather than calculated, padding empathy

Here, a basic three rows of three pictures the basic layout is complete.

Note, however, the novice may ignore a hidden problem: After the collapse of the parent container floating child elements, and sometimes this feature will seriously affect our layout. We have to test, add a div element around ul elements are

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

.Blue elements can be seen next to the .red elements, ul elements acting like it does not exist

This is because the elements after floating out of the document flow, floating on the principle can be found in w3school the CSS float and CSS float property Float explain , not repeat them here. There are many ways to remove floating, here is recommended to add : after pseudo-elements to remove floating

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

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

Let's look at the effect on the normal performance

Detailed code stamp: http://runjs.cn/detail/fvcssbb7

display: inline-block layout

Float almost the same layout, but we need to float: left; replacing display: inline-block;

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

Look at the results, there was a gap, and pushed up into two lines. what happened? -
Note that there will be a gap between the inline-block elements, specifically refer to Zhangxin Xu's blog . As used herein, font-size: 0; method for removing the gap between the elements

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

In this way, what we want is complete. Is not it simple
detailed code can refer to: http://runjs.cn/detail/l867rsbv

Next article: div + CSS picture list layout (two)

Author attention it ~

float layout

display: inline-block layout

Guess you like