Egenskapen float och flera block i CSS
Låt oss nu ha inte ett
div-barn bredvid varandra i HTML-koden, utan två och båda har
float
satt till värdet left. Låt oss se
vad som händer:
<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;
}
:
Så, som vi kan se, ställde sig de två barnblocken i rad, och det första blocket i HTML-koden kommer att vara placerat till vänster.
Låt oss nu istället för värdet left
skriva värdet right. I det här fallet
kommer blocken att flyta till höger, och ordningen
kommer att vara omvänd jämfört med
ordningen i HTML-koden:
<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;
}
:
