CSS method to achieve perfect horizontal arrangement of photo albums-CSS Tutorial-php.cn

CSS method to achieve perfect horizontal arrangement of photo albums

小云云

Release： 2017-12-13 14:27:22

Original

2674 people have browsed it

I recently made a photo album page, and the first problem I encountered was how to arrange it. In this article, we will show you an example of using CSS to solve the perfect horizontal arrangement of photo albums. I hope this example can be helpful to all students. If you are interested, let’s take a look.

Analysis, there is a container, the container has padding, and there is margin between each item in each row. The first thing that comes to mind is this

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

Copy after login

However, this situation will cause two The first problem is that the margin-left of the first item plus the padding of the .container will cause the left margin to be larger than the top, bottom, left, and right, and will also cause the vertical and horizontal spacing between items to be out of control. Same size.
So I considered using the calc attribute

<pre class="brush:css;toolbar:false">.
container {        padding: 5px;    }      
   .container .item 
   {        width: 25%;        position: relative;        float: left;    }    
        /* 这个图片仅仅是为了获取宽高，实际是看不见的 */    .container .item > 
        img {        opacity: 0;        width: 100%;       }       
               /* 这个才是每一个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;  
                                                    }

Copy after login

It would be easier if the above code was implemented with sass. This implementation method is equivalent to actually occupying 25% of the size of each item, but inside The body has 5px margins on the top, bottom, left and right. The margin between item and item is actually the right spacing of each item plus the left margin of the right item, and the bottom margin of each item plus the top margin of the item below it.

This implementation method has several advantages:

#1. The same margins are used on the top, bottom, left and right
2. Pure style
3. The picture proportion will not be destroyed

Related recommendations:

CSS3 examples of cool three-dimensional photo album effects

The above is the detailed content of CSS method to achieve perfect horizontal arrangement of photo albums. For more information, please follow other related articles on the PHP Chinese website!