Kombination von float und margin in CSS
Unser Text ist derzeit links am Bild ausgerichtet.
Versuchen wir, diesen Text ein wenig zu verschieben.
Dazu weisen wir unseren Absätzen einen linken margin
von 30px zu und dem übergeordneten Div
- einen roten Rand.
Unerwarteterweise wird nur der Text nach rechts verschoben, der an das übergeordnete Div grenzt, der Text, der an das Bild grenzt, wird sich nicht verschieben:
<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;
}
:
Um zu verstehen, warum das so ist, fügen wir den Absätzen einen grünen Rand hinzu:
<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;
}
:
Wie wir sehen können, bewegen sich die Absätze tatsächlich
vom linken Rand weg, aber nicht vom Bild, sondern vom übergeordneten Div.
Um dies genauer zu betrachten, fügen wir dem Bild
noch eine Halbtransparenz über die Eigenschaft
opacity hinzu:
<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;
}
:
Jetzt ist klar zu sehen, dass es eine Reaktion auf margin-left
gibt, nur dass die Absätze tatsächlich
unter dem Bild platziert sind. Lassen Sie uns den Abstand entfernen,
aber die Halbtransparenz des Bildes beibehalten:
<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;
}
:
So sehen unsere Absätze tatsächlich aus - ihr Text wurde vom Bild verschoben, aber physisch liegen die Absätze unter dem Bild, das ist am Rand zu sehen, der vom linken Rand des übergeordneten Divs beginnt.
Lassen Sie uns den margin zurückbringen
und das Bild in den ersten Absatz stecken:
<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;
}
:
Jetzt bewegt sich das Bild zusammen mit den Absätzen!
