@sprashivatel

Как убрать наезд?

базовая разметка
<div class="d-flex">
    <div>
        <img src="/images/avatars/0.jpg" alt="avatar">
    </div>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad aliquam atque beatae consequuntur earum eius, excepturi impedit ipsa iusto libero magni, nam omnis quibusdam quos soluta ullam voluptate voluptatum!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias animi eius, ex fugit id illo illum, laboriosam laborum nesciunt odio praesentium quo ratione reiciendis repudiandae saepe sequi ullam voluptas? Reprehenderit.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut consequuntur culpa deserunt dolores eius eos est eum facilis id labore, minus nihil nulla odit quae, quia, quos repellat veritatis voluptatem.
    </div>
</div>

имеем следующее
5e5e81b2e1382665307620.png
теперь хочу чтобы картинка была такая же по высоте, добавляю картинке h-100
<div class="d-flex">
    <div>
        <img src="/images/avatars/0.jpg" class="h-100" alt="avatar">
    </div>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad aliquam atque beatae consequuntur earum eius, excepturi impedit ipsa iusto libero magni, nam omnis quibusdam quos soluta ullam voluptate voluptatum!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias animi eius, ex fugit id illo illum, laboriosam laborum nesciunt odio praesentium quo ratione reiciendis repudiandae saepe sequi ullam voluptas? Reprehenderit.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut consequuntur culpa deserunt dolores eius eos est eum facilis id labore, minus nihil nulla odit quae, quia, quos repellat veritatis voluptatem.
    </div>
</div>

выхлоп
5e5e8240e3d2f488000279.png
текст должен быть справа от картинки
Как исправить?
  • Вопрос задан
  • 38 просмотров
Пригласить эксперта
Ответы на вопрос 1
mediol-name
@mediol-name
Developer
Для картинки - float: left
Для текста - float: right

<div class="d-flex">
    <div style="float:left">
        <img src="/images/avatars/0.jpg" class="h-100" alt="avatar">
    </div>
    <div style="float:right">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad aliquam atque beatae consequuntur earum eius, excepturi impedit ipsa iusto libero magni, nam omnis quibusdam quos soluta ullam voluptate voluptatum!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias animi eius, ex fugit id illo illum, laboriosam laborum nesciunt odio praesentium quo ratione reiciendis repudiandae saepe sequi ullam voluptas? Reprehenderit.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut consequuntur culpa deserunt dolores eius eos est eum facilis id labore, minus nihil nulla odit quae, quia, quos repellat veritatis voluptatem.
    </div>
</div>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы