Как сделать перенос текста, который находится рядом с картинкой?

Question

[Klucva]

У меня есть текст, который находится рядом с картинкой. Я хочу сделать так, чтобы если текст не вмещался, он переносился на следующую строку, но при этом оставался рядом с картинкой.
Что мне надо и что у меня получается:

Текущий код сайта:

.parent {
	border: 1px;
}
.child {
	display: inline-block;
	padding: 0px;
}
.near_thumb {
        position: relative;
        bottom: 127px;
}

<div id="g1" class="parent">
    <a href="page.php?g=1">
        <img src="https://habrastorage.org/webt/62/9c/3e/629c3e37849dd462239139.png" width=460 height=215 class="child">
    </a>
    <div class="near_thumb child">
        <a href="shop.php?g=1" style="text-decoration: none;">
            <font color="black">
                <h3 onmouseout="this.style.textDecoration='none';" onmouseover="this.style.textDecoration='underline';">Some title</h3>
            </font>
        </a>
        <p>
            <font color="grey">some tiny text</font>
        </p>
        <p>some long text some long text some long text some long text some long text some long text some long text some long text some long text some long text some long text some long text some long text some long text some long text some long text some long text some long text some long text some long text some long text </p>
    </div>
</div>

Answer 1

[Александр Семёнов]

Вариант 1. Правильный.
Выбросить эту вёрстку и сделать по новой, прочитав перед этим про flex-box. Но, сдаётся мне, что это в каких-то целях обучения делается, поэтому…

Вариант 2. С учётом имеющего кода.
Либо: задать фиксированную ширину для .child, и использовать совет выше, применив к блоку с картинкой float: left

Либо: все таки почитать про флексы (хотя бы тут) и сделать parent флекс-боксом.

Comments

[Klucva]

Спасибо, помогло!

Answer 2

[Dimava2]

img {float: left}