Méthode CSS pour obtenir une disposition horizontale parfaite des albums photo

J'ai récemment créé une page d'album photo, et le premier problème que j'ai rencontré a été de savoir comment l'organiser. Dans cet article, nous allons vous montrer un exemple d'utilisation de CSS pour résoudre la disposition horizontale parfaite des albums photo. J'espère que cet exemple pourra être utile à tous les étudiants. Si vous êtes intéressé, jetons-y un coup d'œil.

Analyse, il y a un conteneur, le conteneur a un rembourrage, et il y a une marge entre chaque élément dans chaque ligne. La première chose qui me vient à l'esprit est ceci

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

Cependant, ceci. La situation entraînera deux problèmes. Tout d'abord, la marge gauche du premier élément plus le remplissage de .container entraîneront une marge gauche plus grande que le haut, le bas, la gauche et la droite, ainsi que l'espacement vertical et horizontal. entre les éléments pour être incohérent. Contrôlez à la même taille.
J'ai donc envisagé d'utiliser l'attribut calc

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

Il serait plus facile d'implémenter le code ci-dessus avec sass. Cette méthode d'implémentation équivaut au fait que chaque élément occupe 25% de la taille. juste que le corps à l'intérieur a des marges de 5 pixels en haut, en bas, à gauche et à droite. La marge entre élément et élément est en fait l'espacement droit de chaque élément plus la marge gauche de l'élément de droite, et la marge inférieure de chaque élément plus la marge supérieure de l'élément en dessous.

Cette méthode de mise en œuvre présente plusieurs avantages :

1 Les marges supérieure, inférieure, gauche et droite sont les mêmes
2. Style pur
3. Le rapport d'image ne sera pas détruit

Recommandations associées :

10 articles recommandés sur les effets d'album photo

Recommandé aujourd'hui : Dix effets d'album photo JS super faciles à utiliser

Exemples CSS3 d'effets d'album photo tridimensionnels sympas

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!