Div+css Picture List layout (i)

Front-end transduction often encounter picture layout, beginners may be more unfamiliar. Next I will introduce two commonly used plans for graphs in the list of 3 rows and 3 columns:

• Float layout

• Display:inline-block layout

First, the Float layout method

Float layout

Very simple, generally I will use the UL Li layout

    <ul>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>    </ul>

Then set a width for each Li element and float to the left. To display 3 images per line, the width of each image can be calculated using a percentage: 100/3=33.3%.

Li {    list-style:none;    Float:left;    width:33.3%;/* three-column picture arrangement */}

The width of each IMG tag is set to 100%, which fills the width of the entire Li, and is highly adaptable to prevent image distortion

Li {    list-style:none;    Float:left;    width:33.3%;/* three-column picture arrangement */}li img {    width:100%;}

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

Why is it different from what we think? This time the list is chaotic. Don't worry, this is because the size of the picture varies. If the size of the picture in your project is too large, it is recommended that you kill a height in the parent element and set it to go beyond hiding. However, if the size of the picture is not very different, it is recommended to set Height:auto to achieve a highly adaptive purpose.

Li {    list-style:none;    Float:left;    width:33.3%;/* three-column picture arrangement */    height:100px;/* When the picture size is different, set a height */    overflow:hidden;/* out of Hidden */}

Well, it's almost as much as we need.

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

Li img {    position:relative;    width:100%;    Top:50%;/*li half of the height of *    /Transform:translatey (-50%); */* then move up their own 50%*/}

Some students may think of using margin-top, rather than top. It is important to note that the percentages of margin-top and margin-bottom are generally calculated by the width of the container element rather than the height, padding the same

Here, a basic three-row, three-column picture layout is basically complete.

But notice that the novice may miss out on a hidden problem: the parent container collapses after the child element floats, and sometimes this feature can seriously affect our layout. Let's test it by adding 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 floats and then out of the document flow, the principle of floating can refer to the W3school CSS floating and CSS floating properties of float, which is not mentioned here. There are many ways to clear floating, and it is recommended to add: After pseudo element to remove floating

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

Look at the effect again, it's normal.

Display:inline-block layout

Similar to the float layout, but we have to replace the float:left with Display:inline-block;

Li {    list-style:none;    Display:inline-block;    width:33.3%;    /* Three-column picture arrangement */    height:100px;    /* When the picture size is different, you need to set a maximum height */    text-align:center;    /* Content centered */    Overflow:hidden;    /* Out of hidden */}

Look at the effect, there was a gap, and was squeezed into two lines. What's going on? ~
Note that there is a gap between the elements of the Inline-block, see Zhang Xin's blog for details. This uses font-size:0; methods to clear gaps between elements

UL {    width:100%;    margin:0 Auto;    font-size:0;}

In this way, the effect we want is complete. is not very simple