Подпись к фотографии не совпадает с фотографией (html, CSS)

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

Кредит отображается слева над текстовым заголовком, а не под фотографией справа.

Вот мой html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'/>
    <link rel='stylesheet' href='test.css'/>
  </head>
  <body>
    <picture>
      <img class='pic' src='images\str_pic1.JPG' alt = "Person in blue shirt" />
      <figcaption class='pic'>Photo Credit: Photographer</figcaption>
    </picture>
    <div>
      <h2>Title</h2>
      <p>Text text text etc. this is the text body</p>
    </div>
  </body>
</html>

Вот мой CSS:

.page {
  font-size: 100%;
  background-color: #777;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.pic {
  width: 35%;
  float: right;
  margin-left: 20px;
}

Я попытался поместить изображение и кредит в поле div и использовать:

.pic-box {
  display: flex;
  flex-direction: column;
}

в ССЦ. Это не сработало.

Первый раз задаю вопрос здесь, пожалуйста, дайте мне знать, если я могу улучшить!

Не могли бы вы показать изображение того, как бы вы хотели, чтобы результат был?

— 27.11.2022 06:26

html css figcaption

27.11.2022 02:56

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Я считаю, что это то, что вы хотите. Я заменил ваши <picture> и figcaption на div. С дивами очень легко работать. Затем я присвоил обертывающему div (который раньше был <picture> классом picwrap, а затем бывшему figcaption div классу piccap просто для того, чтобы сделать его не тем же классом, что и изображение, которое есть pic.

Затем я добавил это в ваш CSS:

.picwrap {
  float: right;
  text-align: center;
}

.pic {
  max-width: 35vw;
}

Вот рабочий пример с изображением, которое я добавил, а также дал ему больше текста, чтобы вы могли видеть перенос.

.page {
  font-size: 100%;
  background-color: #777;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.picwrap {
  float: right;
  text-align: center;
}

.pic {
  max-width: 35vw;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'/>
    <link rel='stylesheet' href='test.css'/>
  </head>
  <body>
    <div class = "picwrap">
      <img class='pic' src='https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2F3.bp.blogspot.com%2F-h0-QmJgoc0A%2FUynUaTP3h1I%2FAAAAAAAACOI%2FrmJPmSiM388%2Fs1600%2Fjavanes2.jpg&f=1&nofb=1&ipt=2d9c6496df9f3008cb82378322a186661b08e10918f56fd1458cf7d8db784cfe&ipo=images' alt = "Person in blue shirt" />
      <div class='piccap'>Photo Credit: Photographer</div>
   </div>
    <div>
      <h2>Title</h2>
      <p>Text text text etc. this is the text body   Text text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text bodyText text text etc. this is the text body</p>
    </div>
  </body>
</html>

27.11.2022 03:45

пожалуйста, отредактируйте свой .pic, как показано ниже Я думаю, это то, что вы хотите!

.pic {
    width: 35%;
    float: center;
    margin-left: 20px;
  }

27.11.2022 04:50

Другие вопросы по теме

Поля/отступы вокруг контента в новом приложении Vue

Как сложить div так, чтобы он соответствовал всей ширине и высоте

Как выровнять ссылку на панели навигации по вертикали при использовании значка, который больше, чем по умолчанию?

Как изменить элементы, выбранные с помощью querySelectorAll

Как удалить черные точки с правой стороны элементов навигации в моей панели навигации bootstrap 5?

Как выровнять текст панели навигации начальной загрузки с изображением?

Как переместить элемент в сетке из одного раздела в другой

Jinja2.exceptions.TemplateSyntaxError: ожидаемый токен ':', получил '}' в html

Кнопка становится неактивной при изменении цвета фона

Несколько изображений (логотип и фоновое изображение) в титульном слайде xaringan

Подпись к фотографии не совпадает с фотографией (html, CSS)

Ответы 2

Другие вопросы по теме

Похожие вопросы