Блог

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

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

#html #css

Вопрос:

Эй, там!

Я действительно новичок в stack overflow, не очень новичок, потому что я уже использовал эту программу раньше, поэтому, пожалуйста, скажите мне, нужно ли мне что-то исправить или что-то, что я могу улучшить!

Итак, вот моя задача:
я хочу разместить текст здесь:

 [image] text
[image]
[image]

но использование float:right; делает это:

 [image]               text
[image]
[image]

и добавление padding:{num}px; делает его таким:

 [image]
[image]
[image]
                                               text

и все, что я пытаюсь сделать, дает те же результаты. Есть ли способ сделать это?

Другое

Я пробовал использовать это: <h1><img src="image.png">Text</h1> но это делает это:

 [image]
[image]
[image]text

Ответ №1:

Вы можете использовать float: left на изображении. Это позволит разместить текст прямо рядом с ним.

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

1. спасибо за ваши отзывы! Но это не сработало 🙁 это дает тот же результат, что и выполнение <h1><img src="image.png">Text</h1>

2. Также я не имел в виду ничего негативного по отношению к вам, ответьте! Мне жаль, если это произошло таким образом.

Ответ №2:

Комбинация display: inline-block и vertical-align: top должна это сделать.

 .text {
  display: inline-block;
  vertical-align: top;
} 
 <div class="container">
  <img src="https://via.placeholder.com/150"/>
  <p class="text">Some text here</p>
</div>

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

1. Спасибо! Мне это действительно было нужно 🙂

2. Рад, что это помогает. Если это ответ на ваш вопрос, пожалуйста, рассмотрите возможность голосования / пометки в качестве ответа. Это позволит будущим читателям узнать, полезен ли ответ. Хорошего вам дня!

Ответ №3:

Возможно, вы захотите попробовать что-то подобное:

 .imageflex { display: flex; }
.imageflexcontent { margin-left: 5px; margin-top: 0; } 
 <div class="imageflex">
  <img src="https://images.unsplash.com/photo-1487111023822-2e903e12f6f0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8amp;ixlib=rb-1.2.1amp;auto=formatamp;fit=cropamp;w=387amp;q=80" height="280px">

  <p class="imageflexcontent">Photo by <a href="https://unsplash.com/@filipz?utm_source=unsplashamp;utm_medium=referralamp;utm_content=creditCopyText">Filip Zrnzević</a> on <a href="https://unsplash.com/s/photos/forest?utm_source=unsplashamp;utm_medium=referralamp;utm_content=creditCopyText">Unsplash</a></p>
</div>

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

Если это не сработает, вы можете сделать это с помощью встроенного блока вокруг текста, хотя получить желаемые результаты будет сложнее.

 display: inline-block
Метки: