Выровнять дно текста с плавающими изображениямиHtml

Программисты Html
Ответить
Anonymous
 Выровнять дно текста с плавающими изображениями

Сообщение Anonymous »

I'm trying to have my text wrap nicely around two images, but I'd like the text to be aligned at the bottom of it's content (the last line touching the bottom margin of the wrapper).

Код: Выделить всё





.wrapper {
display: flex;
width: 320px;
height: 270px;
background-color: #c1bea6;
}

.box {
text-align: justify;
font-size: 20px;
align-content: end;
}

.img-right {
float: right;
height: 100%;
width: 100px;
margin-left: 15px;
object-fit: contain;
object-position: bottom;
shape-outside: inset(calc(100% - 100px) 0 0);
}

.img-left {
float: left;
width: 100px;
margin-right: 15px;
object-fit: contain;
object-position: top;
shape-outside: inset(calc(100% - 100px) 0 0);
}






[img]https://picsum.photos/id/1080/100/100[/img]
[img]https://picsum.photos/id/1079/100/100[/img]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in dui quis orci ultricies aliquet nec sed enim. Mauris id rutrum nulla, et ornare leo. Donec aliquet malesuada tellus, eu laoreet lectus tincidunt ut. Quisque lacus magna, interdum eu urna.






Код выше приводит к этому


Подробнее здесь: https://stackoverflow.com/questions/797 ... ing-images
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»