Давайте добавим правый margin - в
этом случае текст действительно отодвинется
от правого края картинки:
<div>
<img src="img.png" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
длинный текст
</p>
</div>
div {
width: 400px;
border: 1px solid red;
text-align: justify;
}
p {
border: 1px solid green;
}
img {
float: left;
margin-right: 30px;
opacity: 0.5;
}
:
Интересный эффект получится, если добавить
еще и margin абзацам - сами абзацы
отодвинутся от левого края дива-родителя,
при этом текст в них по-прежнему будет отодвинут
от правого края картинки, так как ей задан
правый margin:
<div>
<img src="img.png" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
длинный текст
</p>
</div>
div {
width: 400px;
border: 1px solid red;
text-align: justify;
}
p {
margin-left: 30px;
border: 1px solid green;
}
img {
float: left;
margin-right: 30px;
opacity: 0.5;
}
:
Скачайте картинку к задаче. Затем повторите страницу по данному образцу:
