CSS/Tutorials/Ausrichtung

Positionierung mit float

Mithilfe der Eigenschaft float kann ein Element an die linke oder rechte Innenkante seines Elternelements verschoben werden.

Allerdings kann es bei der Positionierung mehrerer Bilder zu unschönen Treppenstufen kommen. Da die Textabsätze nicht so hoch wie das rechts floatende Bild sind, richtet sich das nächste rechts schwebende Bild am vorherigen Bild und nicht wie gewünscht am rechten Rand aus.

Beispiel: Treppenstufen bei gefloateten Bildern ansehen …

img {
  float: right;
  width: 225px;
  margin: 0.2em;
}

ansehen …

Ist Ihnen aufgefallen, dass die untere Erklärung nicht an den vorletzten Textabsatz anschließt, sondern soweit nach unten geschoben ist, dass sie wieder über die ganze Breite des Elternelements dargestellt werden kann?

Clearfix

Dies erreichen Sie, indem Sie mittels der CSS-Eigenschaft clear prüfen, ob sich die obere Rahmenkante eines Elements oberhalb der unteren Außenkante eines Floats befindet. Falls dies der Fall ist, können Sie dem nicht gefloateten Element eine Clearance geben, so dass das nächste gefloatete Element an der beabsichtigten Stelle positioniert wird.

Am elegantesten ist es, die Clearance (oder Clearfix) einem Pseudoelement mitzugeben:

Beispiel: Clearance oder Clearfix ansehen …

img {
  float: right;
  width: 225px;
  margin: 0.2em;
}
p:after { 
  content: ""; 
  display: block; 
  clear: both; 
}

Mit CSS wird jedem Textabsatz ein leeres Pseudoelement mitgegeben, das die Höhe des gefloateten Vorgängerelements berücksichtigt.

ansehen …

Empfehlung: Verwenden Sie float und clear nur so sparsam wie möglich. Diese Eigenschaften waren nur dazu gedacht, einzelne Bilder im Textfluss zu positionieren.

Alternativen

Positionierung mit display: inline-block

Mit der CSS-Eigenschaft display: inline-block können Sie eine Box erzeugen, die Eigenschaften von Inline- und Block-Boxen kombiniert. Anstelle eines früher üblichen div-Elements verwenden wir im Beispiel das semantisch sinnvollere figure. (Weitere Beispiele für das Präsentieren von Bildern mit figure finden Sie in diesem Artikel.)

Beispiel ansehen …

figure, figcaption {
  margin: 0;
  padding: 0;
}

figure {
  display: inline-block;
}
 
figure img {
  width: 225px;
}

.oben {
  vertical-align: top;
}

Inline-Elemente liegen wie Text auf einer Grundlinie. Deshalb ragt das höhere Bild nach oben weg. Durch vertical-align: top; können Sie die Bilder auch am oberen Rand ausrichten.

ansehen …

Ist Ihnen aufgefallen, dass die Bilder trotz eines auf 0 gesetzten Innen- und Außenabstands einen Abstand zum nächsten Bild haben? Inline-Elemente haben wie Wörter in einem Text einen Abstand, dessen Größe browserabhängig ist. Jedes Leerzeichen und jeder Zeilenumbruch führt so zu einem Abstand.

Eine Möglichkeit den Abstand zu vermeiden wäre es, nach dem schließenden Tag gleich das neue Element zu öffnen:

Beispiel: Schließende und öffnende Tags in einer Zeile

<figure>
 <img src="Lauf-1-hoch.jpg" alt="Lauf an der Pegnitz - Nürnberger Tor">
 <figcaption>
   ...   
 </figcaption>
</figure><figure>

So entfällt das Leerzeichen und damit auch der Abstand.

Chris Coyier zeigt in diesem Artikel weitere Möglichkeiten wie das Weglassen der End-Tags oder das Setzen der Schriftgröße auf 0, was aber wieder andere Probleme nach sich ziehen kann.

Positionierung mit display: flex

Viel einfacher ist das Positionieren mit display:flex. Diese neue Anzeigeart besticht durch ihre Einfachheit:

• 
• 
• 
• 
• 
• 

Beispiel: Positionieren mit display:flex ansehen …

section {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}
 
figure img {
  width: 100%;
}
 
.verteilt {
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
}

Die einzige feste Größe ist hier die Breite der Bilder, die die volle Breite des figure-Elements einnimmt. Die drei figure-Elemente verteilen sich gleichmäßig über die verfügbare Breite; Angaben zu margin und padding sind möglich, aber nicht nötig.

ansehen …

Siehe auch:

• CSS/Eigenschaften/Flexbox
• Tutorial, mit dem Sie eine responsive Webseite mit Hilfe von Flexbox erstellen können

Weblinks

• the Styleworks.de Zusammenspiel von display, position und float