html - 在图像下方添加文字，然后在左侧添加单独的文字

Question

我有一张图片需要下面的描述(名称和标题)，然后是几段的传记以环绕图片显示。我尝试将文本向左浮动并在 img 标签中使用 align="left"，但是当段落文本环绕图像时，如何确保名称和描述固定在下方？这是一个示例:

<div class="info">
    <img src="../img/test.jpg" alt="test pic">
    <br>
    John Doe
    <br>
    President
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam convallis pellentesque orci a pulvinar. Donec rutrum ipsum eget justo venenatis ultricies vel ac mi. Praesent pellentesque libero at porta ultrices. Nullam venenatis velit ut molestie aliquet. Nullam ac justo vestibulum, rhoncus nibh id, tempus ante. Nulla vel enim eu massa congue mattis ut nec erat. In vel rutrum quam, non pellentesque nisi. Vivamus rutrum purus et pellentesque ultricies. Aenean feugiat diam nec lacus placerat, ac elementum nulla iaculis. Nunc accumsan adipiscing arcu sit amet ultrices.</p>           

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam convallis pellentesque orci a pulvinar. Donec rutrum ipsum eget justo venenatis ultricies vel ac mi. Praesent pellentesque libero at porta ultrices. Nullam venenatis velit ut molestie aliquet. Nullam ac justo vestibulum, rhoncus nibh id, tempus ante. Nulla vel enim eu massa congue mattis ut nec erat. In vel rutrum quam, non pellentesque nisi. Vivamus rutrum purus et pellentesque ultricies. Aenean feugiat diam nec lacus placerat, ac elementum nulla iaculis. Nunc accumsan adipiscing arcu sit amet ultrices.</p>       

Answer 1

好的，从评论延伸:

您实际上可以 float 整个 div，而不是 float 图像:

div.info {
    float:left;
    text-align:center; /* so the text is centered */
}

Fiddle demo