Innenpolster in einer Galerie von Bildern

Question

Also habe ich diese Galerie-Funktion, die nur Bilder in einem Raster zeigt. Ich verwende derzeit TABLE, aber ich möchte zu CSS übergehen, um Breite 100% auf den Bildern zu verwenden, also skaliert es schön.

Recht, am besten so erklärte auf dieser Seite suchen: http://sandman.net/test/css_gallery.php

Die blaue Grenze auf der äußeren DIV ist und die Bilder werden in zu Schichten von divs gehalten. Der Code sieht in etwa so aus:

<div class="thumbs"> 
    <div class="thumb"> 
     <div class="inner"> 
      <img /> 
     </div> 
    </div> 
    <div class="thumb"> 
     <div class="inner"> 
      <img /> 
     </div> 
    </div> 
</div> 

Und so weiter. Und die Stylesheets sind derzeit das:

<style type='text/css'> 
    .thumbs { 
     width: 400px; 
     border: 1px solid blue; 
     overflow: hidden; 
    } 
    .thumb { 
     width: 25%; 
     float: left; 
    } 
    .thumb > .inner { 
     padding: 0 10px 10px 0; 
    } 
</style> 

SO - zu meinem Problem. Wie Sie sehen können, ist das Padding derzeit 10px, was es sein sollte. Aber nicht auf der vierten Spalte !! Grundsätzlich möchte ich, dass die Bilder vier Spalten mit drei Whitespace-Spalten dazwischen haben. Wie sie jetzt sind, enthält jede .thumb ein Bild mit 90px Breite berechnet und 10px Polsterung auf der rechten Seite. Aber sie sollten stattdessen 92,5 Pixel breit und gleichmäßig verteilt sein.

Weil - ein Problem ist, dass ich nicht verschiedene Ränder auf den ersten drei und der vierten Spalte seit dann einstellen kann das Bild mit 100% Breite Größe ändern, was nicht wünschenswert ist. Also muss das Padding irgendwie gleichmäßig auf alle Bilder angewendet werden.

Also, haben Sie einen guten Weg, es zu tun? :)

Answer 1

Sie können auch einen Container div in tumbs div hinzufügen, der alle tumb divs enthält und diesem Container einen negativen Rand gibt, um die Polsterung an den Rändern des Daumendivs zu kompensieren, keine schöne Lösung, aber es funktioniert in allen Browsern , sogar der, der sich mit nternet xplorer reimt.:)

<div class="thumbs"> 
    <div class="container"> 
    <div class="thumb"> 
     <div class="inner"> 
      <img /> 
     </div> 
    </div> 
    <div class="thumb"> 
     <div class="inner"> 
      <img /> 
     </div> 
    </div> 
    </div> <!--container--> 
</div> 

<style type='text/css'> 
    .container { 
    margin: 0 -10px 0 -10px; 
    } 
</style> 

Answer 2

Kein Punkt in esoterische Pseudo-Klassen verwenden ... einfach Ihre eigenen!

Zuallererst, ich würde nur eine Klasse auf das Bild direkt festlegen ... keine Notwendigkeit, einen Container auf jedem Bild haben. Ich denke auch, 'margin' ist eine intelligentere Wahl als 'padding', so die HTML ich mit Blicken am Ende wie:

<div class="thumbs"> 
    <div class="thumb"> 
     <img class="inner first" src="" /> 
    </div> 
    <div class="thumb"> 
     <img class="inner" src="" /> 
    </div> 
    <div class="thumb"> 
     <img class="inner" src="" /> 
    </div> 
    <div class="thumb"> 
     <img class="inner last" src="" /> 
    </div> 
    <div class="thumb"> 
     <img class="inner first" src="" /> 
    </div> 
    <div class="thumb"> 
     <img class="inner" src="" /> 
    </div> 
    <div class="thumb"> 
     <img class="inner" src="" /> 
    </div> 
    <div class="thumb"> 
     <img class="inner last" src="" /> 
    </div> 
</div> 

etc ...

Ihre Mathe Ich gehe davon ist: (400px breit) - (3 x 10px Rand) = 370px/4 Spalten = 92,5 px pro Spalte ... aber normalerweise möchten Sie nicht mit ein halbes Pixel so verwenden, ich werde 92px pro Spalte verwenden, mit 368px Gesamtbreite nach den Rändern. Also dann, da Sie Ihre eigenen Klassen für die erste und letzte sind Einrichten - Ihr Sheet etwas aussehen sollte:

.thumbs { 
     width: 398px; // 368px + 30px for margin 
     border: 1px solid blue; // 1px for each side, results in a total width of 400px 
     overflow: hidden; 
    } 
    .thumb { 
     width : 92px; 
     float : left; 
    } 
    .inner { 
     width : 92px; 
     margin : 0 10px 10px 10px; 
    } 
    .first { 
     margin : 0 10px 10px 0!important; //important should make sure it overrides  .inner 
    } 
    .last { 
     margin : 0 0 10px 10px!important; //important should make sure it overrides .inner 
    } 

Jetzt habe ich nicht getestet dieses aber ich denke, es sollte funktionieren .. Ich hoffe, dass meine Strategie hoffentlich aufschlussreich ist, damit Sie sie an Ihre Bedürfnisse anpassen können. Sie könnten die gleiche Theorie anwenden, um Klassen manuell zuzuordnen und zu stapeln, um sicherzustellen, dass die obere und die untere Zeile jeweils 10 Pixel oben und unten haben.

Hoffe, das hilft!

Answer 3

Okay, also die einfachste Update, das ich ist zu sehen, nur 1 mehr div und ein winziges CSS zwicken zu verwenden. Wickeln Sie das div.thumbs in einem anderen div, wie folgt aus:

<div class="thumbs-wrapper"> 
    <div class="thumbs> 
     <!-- same content here as before --> 
    </div> 
</div> 

und bewegen Sie die Grenze von der div.thumbs, auf die neue Wrapper:

.thumbs-wrapper { 
    border: 1px solid blue; 
    overflow: hidden; 
    width: 390px; /* cuts off the pesky extra padding */ 
} 

.thumbs { 
    width: 400px; 
} 

Der Rest des CSS unverändert ist. Das Ergebnis: