CSS/Tutorials/Ausrichtung
Inhaltsverzeichnis
Positionierung mit float[Bearbeiten]
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.[1] 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.
img {
float: right;
width: 225px;
margin: 0.2em;
}
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[Bearbeiten]
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.[2]
Am elegantesten ist es, die Clearance (oder Clearfix) einem Pseudoelement mitzugeben:
img {
float: right;
width: 225px;
margin: 0.2em;
}
p::after {
content: "";
display: block;
clear: both;
}
Alternativen[Bearbeiten]
Positionierung mit display: inline-block[Bearbeiten]
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.)
figure, figcaption {
margin: 0;
padding: 0;
}
figure {
display: inline-block;
}
figure img {
width: 225px;
}
.oben {
vertical-align: top;
}
vertical-align: top;
können Sie die Bilder auch am oberen Rand ausrichten.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:
<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[3].
Positionierung mit display: flex[Bearbeiten]
Viel einfacher ist das Positionieren mit display:flex. Diese neue Anzeigeart besticht durch ihre Einfachheit:
section {
display: flex;
}
figure img {
width: 100%;
}
.verteilt {
align-items: center;
}
Siehe auch:
- CSS/Tutorials/Flexbox
- Tutorial, mit dem Sie eine responsive Webseite mit Hilfe von Flexbox erstellen können