CSS-Methode zur Erzielung einer perfekten horizontalen Anordnung von Fotoalben

Ich habe kürzlich eine Fotoalbumseite erstellt und das erste Problem, auf das ich stieß, war, wie ich sie anordnen sollte. In diesem Artikel zeigen wir Ihnen ein Beispiel für die Lösung der perfekten horizontalen Anordnung von Fotoalben. Wenn Sie interessiert sind, werfen wir einen Blick darauf.

Analyse: Es gibt einen Container, der Container hat Polsterung und es gibt einen Abstand zwischen jedem Element in jeder Zeile. Das erste, was mir in den Sinn kommt, ist Folgendes Die Situation führt zu zwei Problemen: Erstens führt der linke Rand des ersten Elements plus die Auffüllung von .container dazu, dass der linke Rand größer ist als der obere, untere, linke und rechte Rand und verursacht auch einen vertikalen und horizontalen Abstand zwischen den Elementen ist die Kontrolle auf die gleiche Größe.

Also habe ich darüber nachgedacht, das Calc-Attribut zu verwenden.

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

Es wäre einfacher, den obigen Code mit sass zu implementieren. Diese Implementierungsmethode entspricht der Tatsache, dass jedes Element 25 % der Größe einnimmt Nur dass der Körper im Inneren oben, unten, links und rechts 5-Pixel-Ränder hat. Der Abstand zwischen Element und Element ist eigentlich der rechte Abstand jedes Elements plus der linke Rand des rechten Elements und der untere Rand jedes Elements plus der obere Rand des darunter liegenden Elements.

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

Diese Implementierungsmethode hat mehrere Vorteile:

1 Der obere, untere, linke und rechte Rand sind gleich

2. Reiner Stil

3. Das Bildverhältnis wird nicht zerstört

Verwandte Empfehlungen:

10 empfohlene Artikel über Fotoalbumeffekte

Heute empfohlen: Zehn super einfach zu verwendende JS-Fotoalbumeffekte

CSS3-Beispiele für coole dreidimensionale Fotoalbumeffekte

Das obige ist der detaillierte Inhalt vonCSS-Methode zur Erzielung einer perfekten horizontalen Anordnung von Fotoalben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!