5 Bilder gleichmäßig über die Seitenbreite verteilen?

[Kira]

Hi,

ich habe eine Seite mit variabler Breite und möchte gern 5 Bilder (jedes 200px breit) gleichmäßig über die Breite verteilen.

Das ganze aber so, dass das linke Bild ganz links am Rand, das rechte ganz rechts ist und die restlichen drei mit gleichmäßigem Abstand dazwischen..

Meine einzige Idee dazu wäre es mit einer Tabelle zu machen, aber das fühlt sich eigentlich falsch an für diesen Zweck.. gibt es da eine geschicktere Möglichkeit?

Um zu beschreiben was ich möchte hier mal eine Skizze, "|" ist der Seitenrand, "X" jeweils ein Bild.

  
  |                 |  
  |X   X   X   X   X|  
  |                 |  
  

Danke,
Kira

[1UnitedPower]

Meine einzige Idee dazu wäre es mit einer Tabelle zu machen, aber das fühlt sich eigentlich falsch an für diesen Zweck.. gibt es da eine geschicktere Möglichkeit?

width: 20%;

Oder flex-box.

[1UnitedPower]

width: 20%;

Da war ich wohl was zu vorschnell mit der Antwort.

Oder flex-box.

Der Teil der Antwort ist weiterhin nützlich. Inbesondere solltest du einen Blick auf diejustify-content-Eigenschaft werfen.

[Kira]

Oder flex-box.

Der Teil der Antwort ist weiterhin nützlich. Inbesondere solltest du einen Blick auf diejustify-content-Eigenschaft werfen.

Das schaut perfekt nach dem aus was ich suche und funktioniert auch wunderbar! :)
Danke!

Ein Browser der CSS3 nicht unterstützt ignoriert die flex-geschichten dann einfach oder?

[Der Martin]

Hallo Kira,

Ein Browser der CSS3 nicht unterstützt ignoriert die flex-geschichten dann einfach oder?

so sollte es jedenfalls sein: CSS-Angaben, die ein Browser nicht korrekt verarbeiten kann, soll er ignorieren. Gilt übrigens ebenso für HTML-Elementnamen und Attribute.

Ciao,
 Martin

[1UnitedPower]

Ein Browser der CSS3 nicht unterstützt ignoriert die flex-geschichten dann einfach oder?

Jop, aber mal abgesehen vom IE siehts in der Browserlandschaft (zumindest mit prefix) doch ganz gut aus. Mit Shims/Polyfills musst du vorsichtig sein: Die die ich mir gerade sporadisch angesehen habe implementieren alle eine veraltete flex-box-API.

[Kira]

Ein Browser der CSS3 nicht unterstützt ignoriert die flex-geschichten dann einfach oder?

Jop, aber mal abgesehen vom IE siehts in der Browserlandschaft (zumindest mit prefix) doch ganz gut aus. Mit Shims/Polyfills musst du vorsichtig sein: Die die ich mir gerade sporadisch angesehen habe implementieren alle eine veraltete flex-box-API.

Zumindest im Firefox 19 muss man wohl im about:config "layout.css.flexbox.enabled" auf "true" setzen damit es geht.. das werden aber denke ich die wengisten normalen User gemacht haben :(

[1UnitedPower]

Zumindest im Firefox 19 muss man wohl im about:config "layout.css.flexbox.enabled" auf "true" setzen damit es geht.. das werden aber denke ich die wengisten normalen User gemacht haben :(

Hmpf, das ist natürlich schade. Du sagtest dir fiele eine Lösung mit Tabellen ein? Möglicherweise hilft dir dann das table-Layout.

[Kira]

Hmpf, das ist natürlich schade. Du sagtest dir fiele eine Lösung mit Tabellen ein? Möglicherweise hilft dir dann das table-Layout.

Hatte es eben schon mal mit ner Tabelle probiert.. funktioniert leider doch nicht so wie ich es mir dachte :(

[Kira]

Oder flex-box.

Hab grad mal geschaut... im Webkit Browser funktioniert es zwar, aber z.B. im neuesten Firefox leider nicht.. ist zwar eine schöne Lösung, aber wenn sie im Firefox nicht funktioniert ist das doch eine recht große Usergruppe die es dann falsch sieht :(

Gibt es noch alternativen?

[dave]

Hi,

warum funktioniert das hier nicht wie gewünscht?
Sollte text-align: justify bei inline-elementen (was img ist, oder?) das ganze richtig auf die Zeile aufteilen?

Wo ist mein Denkfehler?

~dave

[Matthias Apsel]

Om nah hoo pez nyeetz, dave!

warum funktioniert das hier nicht wie gewünscht?
Sollte text-align: justify bei inline-elementen (was img ist, oder?) das ganze richtig auf die Zeile aufteilen?

Wie bei einer Textverarbeitung auch. Erst wenn eine Zeile voll ist, werden die Abstände angepasst.

Matthias

[dave]

Hi,

Wie bei einer Textverarbeitung auch. Erst wenn eine Zeile voll ist, werden die Abstände angepasst.

text-align-last

~dave

[JürgenB]

Hallo dave,

warum funktioniert das hier nicht wie gewünscht?

da fehlen dir Leerzeichen zwischen den Bildern. So ist das nur ein "Wort".

Gruß, Jürgen

[dave]

Hi,

Danke.

Dann für Chrome mit flexbox und für Firefox so?

~dave

[Matthias Apsel]

Om nah hoo pez nyeetz, Kira!

Für Browser die rechnen können, gibt es noch eine Lösung:

<p>  
  <img ...>...  
</p>

img             { margin-left: calc((100% - 1000px) / 4 ); }  
img:first-child { margin-left: none; }

Erläuterung: 100% ist die Breite des Elternelements, 1000px = 5 Bilder, 4 Abstände

Du schließt nur sehr wenige Browser aus.

Matthias

[1UnitedPower]

Da war wieder einer schneller ^^

[1UnitedPower]

Vielleicht kriegst du mit calc ein Fallback für Firefox gebastelt.

Habe ein fiddle erstellt, irgendwo ist aber noch ein Denkfehler meinerseits, die Idee sollte aber dennoch klar werden.

[Gunnar Bittersmann]

@@Kira:

nuqneH

ich habe eine Seite mit variabler Breite und möchte gern 5 Bilder (jedes 200px breit) gleichmäßig über die Breite verteilen.

Dass der Viewport bei vielen Nutzern schmaler ist als 1000 Pixel ist dir bewusst? Was soll dann mit den 5 Bildern passieren?

Qapla'

[Enrico]

Hallo Kira,

vielleicht hilft Dir ja dieser Link weiter.

Gruß,
Enrico

[Kira]

vielleicht hilft Dir ja dieser Link weiter.

Cool vielen dank, das funktioniert perfekt und selbst in den ältesten Browsern :D

[Enrico]

Hallo Kira,

freut mich, dass ich Dir helfen konnte, gern geschehen :-)

Gruß,
Enrico

[Gunnar Bittersmann]

@@Enrico:

nuqneH

vielleicht hilft Dir ja dieser Link weiter.

Dahinter verbirgt sich eine Mogelpackung:

„Um die Mehrzeiligkeit zu erzwingen, wurde am Ende des Menüs ein leeres span-Element rein gemogelt.“

Das geht besser – ohne unsinniges Element im Markup.

Qapla'