Proprietatea float și mai multe blocuri în CSS
Să presupunem că acum în codul HTML nu există un singur
div-descendent, ci două și amândurora le este setat float
cu valoarea left. Să vedem
ce se va întâmpla:
<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;
}
:
Așadar, după cum putem vedea, cele două blocuri-descendent s-au aliniat pe un rând, iar primul bloc din codul HTML va fi poziționat în stânga.
Să încercăm acum în loc de valoarea left
să scriem valoarea right. În acest caz
blocurile vor pluti în dreapta, iar ordinea
lor se va schimba în ordine inversă comparativ cu
ordinea din codul 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;
}
:
