Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Inhaltsbereich

14.3 Der erste Versuch: die Grafiken floaten

Der naheliegendste Weg, um Text und Grafiken nebeneinanderzustellen, wäre das einfache Floaten der Grafiken. Im folgenden ToDo machen Sie genau das und floaten die Grafiken innerhalb der div-Elemente nach links.

ToDo: Die Grafiken nach links floaten
  1. Öffnen Sie galerie_basis.html im Editor.
  2. Fügen Sie an das Ende des Style-Blocks die folgende CSS-Regel zum Floaten der Grafiken ein:

    div.galerie img {
      float: left;
      margin-right: 15px;
    }

  3. Speichern Sie die Webseite und betrachten Sie sie im Browser.

CSS-Einsteiger erwarten an dieser Stelle meist, dass damit alles erledigt ist, aber das Ergebnis im Browser entspricht – gelinde gesagt – nicht ganz den Erwartungen:

Abbildung 14.3: Der erste Versuch – eine ziemlich windschiefe Galerie
Abbildung 14.3: Der erste Versuch – eine ziemlich windschiefe Galerie