Propriété float et plusieurs blocs en CSS
Supposons maintenant qu'il y ait côte à côte dans le code HTML
non pas un seul div enfant, mais deux, et que les deux aient la propriété float
avec la valeur left. Regardons
ce qui se passe :
<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;
}
:
Ainsi, comme nous pouvons le voir, les deux blocs enfants se sont alignés sur une ligne, le premier bloc dans le code HTML étant positionné à gauche.
Maintenant, au lieu de la valeur left,
utilisons la valeur right. Dans ce cas,
les blocs flotteront à droite, et l'ordre
sera inversé par rapport à
l'ordre dans le code 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;
}
:
