Die CSS-Eigenschaft float und mehrere Blöcke
Nehmen wir nun an, dass im HTML-Code nicht ein
div-Nachkomme, sondern zwei nebeneinander stehen und beiden
float
mit dem Wert left zugewiesen wurde. Sehen wir uns an,
was passiert:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
some long text
</div>
.parent {
border: 1px solid red;
text-align: justify;
}
.child {
float: left;
width: 200px;
height: 100px;
border: 1px solid green;
}
:
Wie wir sehen können, haben sich die zwei Block-Nachkommen in einer Reihe angeordnet, wobei der erste Block im HTML-Code links positioniert wird.
Schreiben wir nun anstelle des Wertes left
den Wert right. In diesem Fall
werden die Blöcke rechts fließen, wobei sich ihre Reihenfolge
im Vergleich zur Reihenfolge im HTML-Code umkehrt:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
some long text
</div>
.parent {
border: 1px solid red;
text-align: justify;
}
.child {
float: right;
width: 200px;
height: 100px;
border: 1px solid green;
}
:
