Grenzen von float sprengen

Bildergalerien und Co.

Gar nichts zu unternehmen, geht in diesem Fall nicht, da hierbei das Bild den Text überlagern würde.Ein Notbehelf - es kommt immer darauf an, was für einen Aufwand man für diesen Dinosaurier unter den Browsern betreiben möchte - ist das Ausblenden des Bildes.

<!--[if lt IE 8]><style>
#bild {
display: none;
}</style><![endif]-->

Bildergalerien und Co.

Per float lässt sich ganz rasch auch eine flexible Anordnung von Bildern nebeneinander erreichen.

© Internet Magazin

Per float lässt sich ganz rasch auch eine flexible Anordnung von Bildern nebeneinander erreichen.

float eignet sich gut, um mehrere Bilder flexibel nebeneinander anzuordnen. Das Schöne dabei: Die Anordnung erfolgt automatisch. Wenn mehr Platz zur Verfügung steht, werden mehr Bilder nebeneinander dargestellt, sonst weniger.Basis für das Beispiel ist der folgende Quellcode - eine ungeordnete Liste, in der Bilder und Texte platziert sind.

<ul id="galerie"><li><h4>Bild 1</h4><img src="landschaft.jpg" alt=
"Landschaft" /></li><li><h4>Bild 2</h4><img src="landschaft.jpg" alt=
"Landschaft" /></li><!--Weitere Bilder --></ul>

Der CSS-Code sorgt für die flexible Anordnung der Bilder nebeneinander - sie werden einfach links gefloatet:

#galerie li {
list-style: none;
padding: 10px;
float: left;
}

Das funktioniert allerdings nur, solange alle Bilder dieselbe Höhe haben. Wenn sie von unterschiedlicher Höhe sind oder einmal ein Text etwas länger ist, wird das Anordnungsmuster zerstört: Das erste Bild mit einer größeren Höhe wird auch von den nachfolgenden Bildern umflossen.

inline-block - das Beste aus beiden Welten

Im gerade beschriebenen Fall empfiehlt sich der Einsatz von display: inline-block. Üblicherweise unterteilt man Elemente in Block- und Inline-Elemente. Blockelemente wie Überschriften (h1-h6), Absätze (p) bilden einen Block, das heißt, dass davor und danach ein Zeilenumbruch erfolgt. Bei typischen Inline-Elementen wie Links (a) oder Hervorhebungen (strong, em) hingegen bleibt das Element in einer Zeile mit den vorherigen und nachfolgenden Texten.

Eine Anordnung der Elemente nebeneinander in Zeilen gelingt über display: inline-block.

© Internet Magazin

Eine Anordnung der Elemente nebeneinander in Zeilen gelingt über display: inline-block.

display: inline-block ist ein wundersames Zwitterwesen: Zwar werden die so ausgezeichneten Elemente weiterhin wie Inline-Elemente nebeneinander angeordnet, doch jetzt kann man ihnen Ausmaße zuordnen. Sie können also beispielsweise width oder margin benutzen, beides Eigenschaften, die Sie normalen Inline-Elementen nicht zuweisen können.Mit inline-block erfolgt die Darstellung - der HTML-Code ist derselbe geblieben - wieder zeilenweise, wie gewünscht.

#galerie li {
display: inline-block;
vertical-align: top;
margin: 10px;
}

Der IE 7 braucht hierbei ein bisschen Nachhilfe, die Elemente benötigen haslayout und außerdem müssen Sie die Eigenschaft display auf inline umschalten. Diese Angaben sind am besten wieder in konditionalen Kommentaren untergebracht.

<!--[if lt IE 8]><style>
#galerie li {
zoom: 1;
display: inline;
}</style><![endif]-->

Ein anderer geeigneter Einsatzbereich für display mit dem Wert inline-block ist die Anordnung von Navigationselementen nebeneinander. Praktisch an inline-block ist außerdem, dass man die Elemente mit vertical-align anordnen kann. Mit vertical-align: top wird im Galeriebeispiel bewirkt, dass die Bilder einer Zeile alle dieselbe Oberkante haben. Andere Anordnungen wären vertical-align: middle (mittig) oder vertical-align: bottom (unten).Einen Nachteil hat inline-block jedoch, der allerdings nicht immer störend wirkt: So wie bei anderen typischen Inline-Elementen werden Leerzeichen zwischen den Elementen dargestellt. In unserem Beispiel wäre noch immer ein Abstand zwischen den einzelnen li-Elementen zu sehen, auch wenn margin und padding auf 0 gesetzt sind.Zur Behebung dieses Mangels könnte man die einzelnen li-Elemente direkt hinterAnzeige einander schreiben, also etwa:

<li>...</li><li>...</li>

inline-block ist sehr nützlich und liefert in Beispielen wie den eben geschilderten wesentlich bessere Ergebnisse als float. Aber man kann damit nur zeilenweise eine Anordnung realisieren. Unterscheiden sich die Elemente ganz wesentlich in ihrer Höhe, so bleiben immer Lücken, der Platz wird nicht optimal ausgenutzt.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".