Bilderreihe responsive ausrichten

Barodscheff · #1 (**permalink**) 26.09.2014, 12:08

Hi Leute,

irgendwie stehe ich gerade auf dem Schlauch.

Ich habe ein Hauptbild und dadrunter 4 Thumbnails. Die 4 Thumbnails sollen gleichmäßigen Abstand zueinander haben und jedes soll 25% breit sein.

Das erste Bild soll keinen Abstand nach links und das 4. Bild keinen Abstand nach rechts haben. Wichtig hierbei ist, dass das alles responsive ist und die Bilder alle gleich groß sind und in der Mitte den gleichen Abstand zueinander besitzen.

Doch egal was ich mit margin, padding oder :nth-child probiere, es haut alles nicht so hin.

Ich habe das Problem hier mal vereinfacht in einem JSFiddle nachgebaut:
Edit fiddle - JSFiddle
Wie man sieht passen hier z.B. die Abstände, doch das letzte Bild ist größer als die anderen weil da das padding nach rechts fehlt.

Hat jemand eine Idee wie ich das möglichst einfach lösen kann?

Gruß

K.Roland · #2 (**permalink**) 26.09.2014, 14:23

So: Edit fiddle - JSFiddle

Code:

}  

.thumbs img {
  width: 23.5%;
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box;    
  box-sizing: border-box; 
  height: auto;
  float: left;
  margin-left: .5em;
} 

.thumbs img:nth-child(1){
  margin-left: 0;
}

____________
MfG Roland

schatzi · #3 (**permalink**) 26.09.2014, 14:50

Hallo!

Das bricht dir dann bei schmalen Breiten aber auch auseinander...

Am einfachsten gibst du alles in Prozent an, so dass 4*Bild + 3*Margin = 100%
Z.B.
img{width:24%;margin-right:1.333%;}
img:last-child{margin-right:0;}

etux · #4 (**permalink**) 26.09.2014, 16:14

Zitat:

Zitat von Barodscheff

... Die 4 Thumbnails sollen gleichmäßigen Abstand zueinander haben und jedes soll 25% breit sein.

Vorausgesetzt die 4 Bilder verhalten sich nach außen als Block-Elemente, bleibt bei einer Bilderbreite von 25% kein Zwischenabstand übrig.
Wenn sie als Inline-Elementen formatiert sind und dazwischen Leerzeichen stehen (wie in Deinem Quellcode), passen sie nicht neben einander.
Daher verstehe ich die gewünschte 25%-Breite nicht, aber bitte:

HTML-Code:

<!doctype html>
<meta charset="UTF-8">
<title>Barodscheff :: xhtmlforum.de</title>
<style>
* {
  margin: 0;
  padding: 0;
}
.container {
  width: 60%;
  margin: 2em auto;
}
.container > img {
  width: 100%;
  height: auto;
}
.thumbs {
  text-align: justify;
  padding: 0 .25em;
}
.thumbs:after {
  content: '';
  display: inline-block;
  padding-left: 100%;
}
.thumbs img {
  display: inline-block;
  width: 25%;
  height: auto;
  margin: 0 -.25em;
}
</style>
<div class="container">
  <img src="http://placehold.it/400x250">
  <div class="thumbs">
    <img src="http://placehold.it/120x80">
    <img src="http://placehold.it/120x80">
    <img src="http://placehold.it/120x80">
    <img src="http://placehold.it/120x80">  
  </div>  
</div>

Toro · #5 (**permalink**) 27.09.2014, 19:19

Alles responsive und auch für alte Browser: Edit fiddle - JSFiddle
25% für die thumbs passt allerdings nicht ganz.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Kundeninteresse an Responsive Layout	heiko_rs	Offtopic	18	24.05.2013 13:37
Horizontales Ausrichten von input (type=text) cross-browser	kuhn	CSS	0	08.05.2009 09:57
p Element in einem div unten Ausrichten	rd2000	CSS	8	14.11.2007 16:14
bild soll sich an footer ausrichten	member31	CSS	13	30.01.2007 09:44
Tabelle rechts ausrichten mit CSS	Simon_B	CSS	6	23.08.2005 16:04