Как сделать обтекание картинки текстами внутри DIV?

Question

[irtf]

Как можно вставить <h1> и <p> справа от текста?

Код:

<div class="div"><img src="some_image.png" class="image" alt="">
    <h2 class="name">Название тут</h2>
    <p class="discription">Описание тут</p>
</div>

В конце концов все это должно выглядеть примерно так:



Вокруг этого всего должен быть border. Но, к сожалению, я забыл его нарисовать.

Если брать только название без описания, то вполне работает вот этот код:

.div {
        background: red;
        display: table;
}
.image {
        display: table-cell;
}
.name {
        display: table-cell;
        vertical-align: middle;
}

Но при попытке внедрить что-то подобное вместе с описанием - получается полнейший бардак.

Как это сделать?

Answer 1

[Макс Кузнецов]

Как один из вариантов — flexbox.
https://www.youtube.com/watch?v=EO8hH_2OwCU
Там 4 видео. Рекомендую пройти весь небольшой курс по вёрстке, парень очень толково и просто объясняет.

Пример: https://jsfiddle.net/6x2wuf51/1/

Comments

[irtf]

Спасибо! Получилось даже просто руководствуясь вашим примером :)