Kombinasjon av float og margin i CSS
Nå er teksten vår presset mot bildet fra
venstre side. La oss prøve å skyve denne
teksten litt bort. For å gjøre dette, vil vi sette
venstre margin på våre avsnitt til
30px, og gi forelderdiven
- en rød kant.
Uventet vil bare teksten som støter opp til forelderdiven trekke seg tilbake til høyre, mens teksten som støter opp til bildet - ikke vil flytte seg:
<div>
<img src="img.png" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
some long text
</p>
</div>
div {
width: 400px;
border: 1px solid red;
text-align: justify;
}
p {
margin-left: 30px;
}
img {
float: left;
}
:
For å forstå hvorfor dette er slik, la oss legge til en grønn kant på avsnittene:
<div>
<img src="img.png" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
some long text
</p>
</div>
div {
width: 400px;
border: 1px solid red;
text-align: justify;
}
p {
margin-left: 30px;
border: 1px solid green;
}
img {
float: left;
}
:
Som vi ser, flytter avsnittene seg faktisk
fra venstre kant,
men ikke fra bildet, men fra forelderdiven.
For å se nærmere på dette, la oss legge til
halvgjennomsiktighet på bildet ved hjelp av egenskapen
opacity:
<div>
<img src="img.png" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
some long text
</p>
</div>
div {
width: 400px;
border: 1px solid red;
text-align: justify;
}
p {
margin-left: 30px;
border: 1px solid green;
}
img {
float: left;
opacity: 0.5;
}
:
Nå ser vi tydelig at det er en reaksjon på margin-left,
men avsnittene er faktisk plassert
under bildet. La oss fjerne margen, men
beholde bildets gjennomsiktighet:
<div>
<img src="img.png" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
some long text
</p>
</div>
div {
width: 400px;
border: 1px solid red;
text-align: justify;
}
p {
border: 1px solid green;
}
img {
float: left;
opacity: 0.5;
}
:
Slik ser våre avsnitt egentlig ut - deres tekst er flyttet bort av bildet, men fysisk ligger avsnittene under bildet, dette kan sees ved kanten, som starter fra venstre kant på forelderdiven.
La oss tilbakeføre margin og putte bildet
inn i det første avsnittet:
<div>
<p>
<img src="img.png" alt="">
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
some long text
</p>
</div>
div {
width: 400px;
border: 1px solid red;
text-align: justify;
}
p {
margin-left: 30px;
border: 1px solid green;
}
img {
float: left;
opacity: 0.5;
}
:
Nå beveger bildet seg sammen med avsnittene!
