CSS float un padding kombinācija
Vēlreiz novietosim attēlu virs rindkopām,
atstājot tām kreiso padding.
Šajā gadījumā padding atstatīs tikai
to tekstu, kas atrodas pa kreisi no vecāka div,
nevis no mūsu attēla:
<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;
padding-left: 30px;
border: 1px solid green;
}
img {
float: left;
opacity: 0.5;
}
:
Tagad ievietosim attēlu pirmajā rindkopā - tas pārvietosies pa labi kopā ar rindkopu tekstu:
<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;
padding-left: 30px;
border: 1px solid green;
}
img {
float: left;
opacity: 0.5;
}
:
