Добавьте текст внизу и изображение, а затем добавьте отдельный текст слева

Question

Добавьте текст внизу и изображение, а затем добавьте отдельный текст слева

0

У меня есть изображение, которому нужно описание ниже (имя и название), а затем биография пара абзацев, отображаемая в обложке вокруг изображения. Я попытался переместить текст влево и использовать align = "left" в теге img, но как я могу убедиться, что имя и описание зафиксированы ниже, когда текст абзаца обертывается вокруг изображения? Вот пример:

<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>

epg388 13 дек. 2013, в 09:01

Источник

2

Как это: jsfiddle.net/YR5Ef ?
Passerby 13 дек. 2013, в 07:35
0

Вы на самом деле хотите плавать div, содержащий img и текст справа. Не беспокойтесь о тексте или расположении описания под изображением, это произойдет автоматически.
Leifingson 13 дек. 2013, в 07:37
0

@passerby - это прекрасно работает, хотите опубликовать ответ, чтобы я мог пометить его как правильный?
epg388 13 дек. 2013, в 08:13

Показать ещё 1 комментарий

Теги:

html

css

1 ответ

Ещё вопросы

Вы на самом деле хотите плавать div, содержащий img и текст справа. Не беспокойтесь о тексте или расположении описания под изображением, это произойдет автоматически.
@passerby - это прекрасно работает, хотите опубликовать ответ, чтобы я мог пометить его как правильный?

Passerby · Accepted Answer · 2013-12-13T06-07-00.000Z

Хорошо, простившись с комментария:

Вместо того, чтобы плавать изображение, вы можете фактически плавать весь div:

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

Демо-версия скрипта