將文本添加到圖像下方，然後在左側添加單獨的文本

我有一張圖片需要下面的描述（名稱和標題），然後顯示一段包含圖片的傳記。我嘗試將文本浮動到左側，並在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>

來源

2013-12-13 epg388

就像這樣： http://jsfiddle.net/YR5Ef/？ – Passerby

你實際上想把包含img的div和文本浮動到右邊。不要擔心文字或圖片下面的描述，這些會自動發生。 – Leifingson

@passerby - 這很好，想發佈答案，所以我可以標記它是正確的？ – epg388

好吧，從註釋擴展：

而不是浮動的形象，你其實可以浮在整個DIV：

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

Fiddle demo

來源

2013-12-13 08:15:50 Passerby

將文本添加到圖像下方，然後在左側添加單獨的文本

回答

相關問題