CSS to achieve the perfect layout of album landscape

Recently, to make a photo album page, the first problem encountered is how to arrange. This article we will take a look at a CSS to solve the album Landscape Perfect layout example, I hope this example can help you to bring the students, interested in a look up.

Analysis, there is a container, the container has padding, each row of each item has a margin, the first thought is this

<pre class= "Brush:css;toolbar:false" >.container {        padding:10px;    }            . Container. Item      {        float:left;        width:24%;        margin-left:1%;        border:1px solid #CCC;         }       </pre>

However, this situation can cause two problems, The first one is the first item itself Margin-left Plus. Container's padding will cause the left margin to be larger than the upper and lower sides, and the vertical spacing between item and item cannot be controlled to the same size as horizontal spacing.
So consider using the Calc attribute

<pre class= "Brush:css;toolbar:false" >.container {padding:5px;        }. Container. item {width:25%;        position:relative;    Float:left;        }/* This image is just for the sake of wide height, actually invisible */. Container. Item > IMG {opacity:0;       width:100%;        }/* This is the container for each item. Container. Item. body {border:1px solid #CCC;                        Width:calc (100%-10px);                              Height:calc (100%-10px);                                    Margin:auto;                                         left:0;                                              top:0;                                                    bottom:0;                                                      right:0; } </pre> 

If the above code is implemented with SASS, it is easier, this implementation method is equivalent to the actual size of each item occupies 25%, but the body inside the upper and lower side of the 5px margin. The margin between item and item is actually the right spacing of each item plus the left margin of the right item, with the bottom margin of each item plus the top margin of item below it.

There are several benefits to this approach:

1, the upper and lower sides are the same margin
2. Pure style
3, picture proportion will not be destroyed