Блог

Главная - Вопросы по программированию - Расположить подпись к изображению рядом с изображением

Расположить подпись к изображению рядом с изображением

#html #css #figure

#HTML #css #рисунок

Вопрос:

Я хочу добавить a figcaption , который представляет собой абзац, объясняющий мое изображение, и я хочу поместить его рядом с самим изображением (если абзац слишком длинный, я бы хотел, чтобы текст шел под изображением после завершения пробела рядом). Я искал команды, также CSS, но ничего не нашел.

Комментарии:

1. вы видели это: w3schools.com/tags/tag_figcaption.asp ?

Ответ №1:

Переместите изображение влево и установите overflow: auto , чтобы убедиться, что фигура будет содержать значение с плавающей точкой.:

 figure {
  max-width: 300px;
  overflow: auto;
}

figure img {
  float: left;
  margin: 0 1em 1em 0;
}  
 <figure >
  <img src="http://placekitten.com/75/75" />
  
  <figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad 
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit 
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </figcaption>
</figure>