Kombination af float og margin i CSS
Lige nu er vores tekst presset op mod billedet fra venstre
side. Lad os prøve at skubbe lidt til
denne tekst. For at gøre dette, vil vi give vores afsnit
en venstre margin på 30px, og give forældrediven
- en rød kant.
Pludselig vil kun den tekst trække sig tilbage til højre, som støder op til forældrediven, mens teksten, der støder op til billedet - ikke flytter sig:
<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 at forstå, hvorfor det er sådan, lad os tilføje en grøn kant til afsnittene:
<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 kan se, trækker afsnittene sig faktisk væk
fra venstre kant, men ikke fra billedet, men fra forældrediven.
For at se nærmere på det, lad os tilføje
halvgennemsigtighed til billedet via egenskaben
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;
}
:
Nu kan vi tydeligt se, at der er en reaktion på margin-left,
men afsnittene er faktisk placeret
under billedet. Lad os fjerne margenen, men
beholde billedets halvgennemsigtighed:
<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;
}
:
Sådan ser vores afsnit faktisk ud - deres tekst er skubbet væk af billedet, men fysisk ligger afsnittene under billedet, det kan ses på kanten, som starter fra forældredivens venstre kant.
Lad os genindføre margin og putte billedet
ind i det første afsnit:
<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;
}
:
Nu flytter billedet sig sammen med afsnittene!
