Η ιδιότητα float και πολλά blocks στο CSS
Ας υποθέσουμε ότι τώρα στο HTML κώδικα δίπλα-δίπλα υπάρχουν όχι ένα
απόγονo div, αλλά δύο και και στα δύο έχει οριστεί float
με τιμή left. Ας δούμε
τι θα συμβεί:
<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;
}
:
Έτσι, όπως βλέπουμε, τα δύο blocks-απόγονοι ευθυγραμμίστηκαν στη σειρά, με το πρώτο block στον HTML κώδικα να βρίσκεται στα αριστερά.
Ας γράψουμε τώρα αντί για την τιμή left
την τιμή right. Σε αυτήν την περίπτωση
τα blocks θα επιπλέουν στα δεξιά, και η σειρά
τους θα αντιστραφεί σε σχέση με
τη σειρά στον HTML κώδικα:
<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;
}
:
