Как сделать текст справа от картинки в css

Как сделать, чтобы текст был справа от картинки?

введите сюда описание изображения

Как сделать, чтобы текст был справа от картинки на экранах <768px?

  1. Первый вариант. Надо положить картинку и текст в один блок 1, картинке задать, например, float:left . Потом еще надо создать пустой блок 2 внутри блока 1 (или clearfix — ::after ), задать блоку 2 свойство clear:left .
  2. Второй вариант. Положить картинку и текст в один блок 1, блоку 1 задать position:relative , картинке задать position:absolute; top:0px; left:0px; ,текст положить в параграф, параграфу задать margin-left , равный ширине картинки

Лучше всего всё переписать под нормальную блочную верстку с css display "table" :

А то блоки и параграфы в ссылке. включайте музыку поспокойнее когда программируете 🙂

P.S. В HTML 4.01 ваша конструкция с блоками и параграфами внутри ссылки вообще не будет работать, в HTML 5 будет, но это знаете — как если бы выступить на научной конференции на блатном жаргоне. скорее всего поймут о чем речь, но. 🙂

Переписать разметку — здравая тема. Но можно сделать вот так:

Тогда будет по спеке все — обтекание текста вокруг картинки, ради этого float и был придуман когда-то.

&#x412;&#x441;&#x451; &#x435;&#x449;&#x451; &#x438;&#x449;&#x435;&#x442;&#x435; &#x43E;&#x442;&#x432;&#x435;&#x442;? Посмотрите другие вопросы с метками html css bootstrap или задайте свой вопрос.

дизайн сайта / логотип &#169; 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая &#171;Принять все файлы cookie&#187; вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Картинка слева, текст справа

Все фото слева, а текст справа. Нужно свой текст под своим фото
Вот такая ситуация, довльно простая, но до меня никак не допрёт как это сделать.. &lt;html&gt; &lt;head&gt;.

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

Div слева по центру и справа
Доброго дня! По бокам понятно как выровнять, через float, а по центру? &lt;div >

Выравнивание списка слева и справа
Здравствуйте, у меня на тестовом в записях сверху есть строка в которой отображается &quot;автор, дата.

Как сделать обтекание текста справа!?

Как сделать обтекание текстом справа!?

Обтекание текстом справа блочного элемента.

Как вы наверное знаете, что элементы "Dom" имеют либо строчный тип — например span, либо блочный — например div

Рассмотрим обтекание текстом справа блочного элемента

Для того, чтобы текст обтекал справа блочный элемент "div", создадим данный тег вместе с классом " obtekanie_tekstom_sprava "

Добавим стили к данному классу(class), основное свойство для обтекания текстом справа — это "float:left;" :

Соберем весь код вместе:

float:left;/* Положение справа */

background: #fd0; /* Цвет фона */

width: 100px; /* Ширина */

Напишем несколько строк бессмысленного текста, для того, чтобы посмотреть на обтекание текстом справа. Данный текст находится выше блочного элемента.

Этот и далее текст находится ниже блока. который имеет свойство обтекания справа — "float:left;"

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

И также мы наблюдаем прилипание текста к блоку — это не совсем интересно выглядит — поэтому, в следующем пункте, мы этот недостаток решим!

Обтекание текстом строчного элемента справа.

Теперь давайте используем строчный элемент span

Добавим класс "obtekanie_tekstom_sprava_1".

Который будет похож на обтекание теста справа на выше приведенный пример, только добавим еще margin справа " margin-right: 29px; "

Соберем весь код вместе:

Результат обтекания текстом справа строчного элемента :

Чтобы рассмотреть подробнее результат обтекания текстом справа, нам понадобится какой-то тестовый текст, который и будет подопытным текстом.

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

Класс — obtekanie_tekstom_sprava_1 + margin Обтекающий текст справа , мы расположим ниже строчного элемента, который мы должны применить обтекание текстом справа.
Со слов " Обтекающий текст справа ", который покрашен в красный цвет, он весь расположен ниже строчного элемента.

И как вы наверное заметили, что различия между обтеканием текстом справа блочного или строчного элемента не отличается ничем!

Обтекание текстом картинки справа.

Следующим рассмотрим "обтекание справа текстом" картинки. Нам потребуется какая-то картинка, которая меньше шириной основного текстового блока :
Как видим. наша картинка расположилась по умолчанию, и текст? что расположен физически на одной строке с картинкой, расположился на одной строке с картинкой, но всего лишь одна строчка!? Почему так? Чтобы посмотреть код нажмите исследовать элемент Обтекание текстом картинки справа. Нам нужно, чтобы данную картинку обтекал текст справа, не только одна строка, а весь текст обтекал его справа.

Для обтекания текстом справа нам понадобится :

Берем нашу подопытную картинку, которую будем обтекать текстом справа + добавим класс "obtekanie_tekstom_sprava_2"

Добавим стили к нашему классу :

Соберем весь код вместе:

Результат обтекания текстом справа картинки.

Далее посмотрим на результат обтекания нашей картинки текстом справа. Этот текст написан выше картинки. Этот текст покажет обтекание текста справа от картинки.

Результат обтекания текстом справа картинки.

Следующий текст будет физически находиться ниже картинки.

Чтобы посмотреть в коде нажмите исследовать элемент

margin: 4px 20px 4px; добавил для того, чтобы по трем направлениям текст не прилипал к блоку, это соответственно : "верх, справа, низ"

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *